时间:2021-05-25
最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面我就来讲一下我的实现过程:
socksjs
•客户端和服务器端api尽可能简洁,尽量靠近websocket api
•支持服务端扩展和负载均衡技术
•传输层应该全面支持跨域通信
•如果受到代理服务器的限制,传输层能优雅地从一种方式回退到另一种方式
•尽可能快地建立连接
•客户端只是纯粹的JavaScript,不需要flash
•客户端JavaScript必须经过严格的测试
•服务器端代码尽可能简单,降低用另一种语言重写server的代价
前提
要进行文章中的代码的测试,需要服务端端开发人员配合你,提供相关的通信接口.来完成客户端和服务端的通信.实现通信,我们需要用到另个模块 sockjs-client 模块和 stomjs 模块,接下来我会先对这两个模块做一个简单的介绍.
关于实时通信
实现实时通信,我们通常有三种方法:
ajax轮询 ajax轮询的原理非常简单,让浏览器每隔几秒就像服务器发送一个请求,询问服务器是否有新的信息.
http 长轮询 长轮询的机制和ajax轮询差不多,都是采用轮询的方式,不过才去的是阻塞模型(一直打电话,没收到就不挂电话),也就是说,客户端发起链接后,如果没有消息,就一直不返回response给客户端.知道有新的消息才返回,返回完之后,客户端再此建立连接,周而复始.
WebSocket WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议.在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送,不需要繁琐的询问和等待. 从上面的介绍很容易看出来,ajax轮询和长轮询都是非常耗费资源的,ajax轮询需要服务器有很快的处理速度和资源,http长轮询需要有很高的并发,也就是同时接待客户的能力.而WebSocket,只需要经过一次HTTP请求,就可以与服务端进行源源不断的消息收发了.
sockjs-client
sockjs-client 是从SockJS中分离出来的用于客户端使用的通信模块.所以我们就直接来看看SockJS. SockJS是一个浏览器的JavaScript库,它提供了一个类似于网络的对象,SockJS提供了一个连贯的,跨浏览器的JavaScriptAPI,它在浏览器和Web服务器之间创建了一个低延迟,全双工,跨域通信通道. 你可能会问,我为什么不直接用原生的WebSocket而要使用SockJS呢?这得益于SockJS的一大特性,一些浏览器中缺少对WebSocket的支持,因此,回退选项是必要的,而Spring框架提供了基于SockJS协议的透明的回退选项。SockJS提供了浏览器兼容性,优先使用原生的WebSocket,如果某个浏览器不支持WebSocket,SockJS会自动降级为轮询.
stomjs
STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的简单文本协议; WebSocket是一个消息架构,不强制使用任何特定的消息协议,它依赖于应用层解释消息的含义. 与HTTP不同,WebSocket是处在TCP上非常薄的一层,会将字节流转化为文本/二进制消息,因此,对于实际应用来说,WebSocket的通信形式层级过低,因此,可以在 WebSocket 之上使用STOMP协议,来为浏览器 和 server间的 通信增加适当的消息语义。
STOMP与WebSocket 的关系:
代码实现
代码中除了最基本的连接,还设置了一个定时器,每隔十秒发送一条数据到服务器端,如果发生错误,catch这个错误,重新建立连接.
// 安装并引入相关模块import SockJS from 'sockjs-client'; import Stomp from 'stompjs';export default { data() { return { dataList: [] }; }, mounted:function(){ this.initWebSocket(); }, beforeDestroy: function () { // 页面离开时断开连接,清除定时器 this.disconnect(); clearInterval(this.timer); }, methods: { initWebSocket() { this.connection(); let self = this; // 断开重连机制,尝试发送消息,捕获异常发生时重连 this.timer = setInterval(() => { try { self.stompClient.send("test"); } catch (err) { console.log("断线了: " + err); self.connection(); } }, 5000); }, removeTab(targetName) { console.log(targetName) }, connection() { // 建立连接对象 this.socket = new SockJS('http://xxxxxx:8089/ws');//连接服务端提供的通信接口,连接以后才可以订阅广播消息和个人消息 // 获取STOMP子协议的客户端对象 this.stompClient = Stomp.over(this.socket); // 定义客户端的认证信息,按需求配置 var headers = { login: 'mylogin', passcode: 'mypasscode', // additional header 'client-id': 'my-client-id' }; // 向服务器发起websocket连接 this.stompClient.connect(headers,(frame) => { this.stompClient.subscribe('/topic/chat_msg', (msg) => { // 订阅服务端提供的某个topic consolel.log(msg.body); // msg.body存放的是服务端发送给我们的信息 }); }, (err) => { }); }, disconnect() { if (this.stompClient != null) { this.stompClient.disconnect(); console.log("Disconnected"); } } }};总结
以上所述是小编给大家介绍的在vue中使用SockJS实现webSocket通信的过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
基于socket通信,spring也有自己的socket通信服务:websocket,这次就介绍如何在spring项目中使用websocket进行通信交互。后台
本文主要有三个步骤1、用户登录后建立websocket连接,默认选择websocket连接,如果浏览器不支持,则使用sockjs进行模拟连接2、建立连接后,服务
vue+django实现一对一聊天和消息推送的功能。主要是通过websocket,由于Django不支持websocket,所以我使用了django-chann
WebSocket实时通信方案。WebSocket协议是HTML5一种新的通信协议,它实现了网页界面和服务器之间的异步通信。它的本质是一种传输通信协议,可以实现
常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用实现效果:Keyboard.vue123符·{{key}}