关于WebSocket

WebSocket是HTML5 开始提供的一种在单个TCP连接上进行全双工通讯的协议。什么是全双工?就是在同一时间可以发送和接收消息,实现双向通信,比如打电话。WebSocket相比于ajax,其优点在于浏览器和服务端只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据主动传输。而ajax则需要浏览器不断地主动向服务器发送请求,服务器才会响应,这种模式相对浪费带宽和资源。

而且,WebSocket的API也是非常的简单方便,所以用WebSocket实现消息的实时推送就再好不过了。

进入正题,首先创建一个WebSocketUtil类,在这个类下配置WebSocket,先把整体轮廓展示一下。

然后给每个方法实现具体功能

1、createWebSocket:new一个WebSocket对象webSocketSystem,并建立连接,连接建立时会触发onopen事件,可以在onopen里面定时给服务端发送心跳消息。

2、这里是重点,当客户端接收服务端数据时触发onmessage事件,我们可以给WebSocketUtil类写一个方法wrapperMessageSystem处理接收到的消息。

WebSocked发来的是一个JSON格式,这里我们用eventBus来传递触发事件:

Message.vue组件内用eventBus监听WebSocketUtil类传过来的事件并做处理,最后在组件销毁前关闭此事件

站内消息的实时推送功能就完成了,是不是很简单呀

posted on
2020-12-19 13:21 
特困前端淦 
阅读(0
评论(0
编辑 
收藏

版权声明:本文为aibiliv原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/aibiliv/p/14131027.html