WebSocket实现站内消息实时推送

关于WebSocket

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

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

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

WebSocket实现站内消息实时推送

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

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

WebSocket实现站内消息实时推送

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

WebSocket实现站内消息实时推送

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

WebSocket实现站内消息实时推送

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

WebSocket实现站内消息实时推送

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

WebSocket实现站内消息实时推送

上一篇:mysql基础-进阶一【基础语法】


下一篇:oracle报名学习