WebSocket实现站内消息实时推送


关于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类传过来的事件并做处理,最后在组件销毁前关闭此事件

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM