所在的位置: 前端 >> 前端市场 >> websocket详细介绍

websocket详细介绍

北京痤疮正规医院 http://baijiahao.baidu.com/s?id=1689204368658288694&wfr=spider&for=pc

一,什么是websocket

HTTP协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起,服务端对请求做出应答处理,HTTP协议无法实现服务器主动向客户端发起消息。

这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。大多数Web应用程序将通过频繁的异步JavaScript和XML(AJAX)请求实现长轮询。轮询的效率低,非常浪费资源。

Websocket应运而生,WebSocket连接允许客户端和服务器之间进行全双工通信,以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket只需要建立一次连接,就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。

二,websocket入门案例

引入maven依赖

编写websocket配置类

编写websocket核心类

ServerEndpoint(value="/webSocket/message/{userId}"),前端通过这个url与后端建立连接。

OnOpen连接建立成功时触发

OnClose连接关闭时触发

OnError客户端与服务端连接异常

buildMessageCountContent()方法主要是后台通过数据库获取当前未读消息的条数。

这里粘出来的只有OnOpen的代码,其他代码不一一罗列,大家可以自己动手试试。

前端代码

前端我使用的react框架,这个项目中,websocket主要用来处理消息通知,此处只简单展示前端连接以及消息处理的部分代码。

接收到当前未读消息条数,在右上角的小铃铛上展示条数,然后点开小铃铛弹出未处理消息列表,后续根据具体的操作逻辑做处理。

三,总结

Websocket这种全双工通信的方式有很大的优势,像上面这块代码,以前的开发模式就是前端轮询去调用后台的接口获取未处理消息数据,这种方式既不实时又浪费资源,这边只是简单给大家介绍了websocket,给大家引入这块知识,大家可以自己尝试尝试。希望大家喜欢这篇文章。




转载请注明:http://www.aierlanlan.com/rzdk/3929.html