vue spa websockt 实现站内消息的发送和接收

本文主要是介绍vue spa websockt 实现站内消息的发送和接收，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

几个基本的流程

1. 检查浏览器是否支持websocket，即判断'WebSocket' in window和'MozWebSocket' in window值是否为true，true就是浏览器支持websocket，这一步骤可以发生在mounted当中。
2. 客户端与服务器建立连接。new WebSocket(url)即创建新的websocket实例，url为服务端提供，用来和服务器建立websocket连接。注意这个连接的过程中使用的协议不是http，https，而是ws协议。new WebSocket(url).onopen = () => {}是用来打开连接。这一步骤也可以发生在mounted当中。
3. 判断连接状态，确保连接成功。检查new WebSocket(url).readyState的值，0-CONNECTING-正在连接中，暂时不可以通信；1-OPEN-连接成功，可以发送和接收消息；2-CLOSING-正在关闭连接，不可以发送接收消息了；3-CLOSED-打开连接失败或者连接已关闭。这一步骤也可以发生在mounted当中。
4. 向服务器发送消息。new WebSocket(url).send(yourMsg)，yourMsg为客户端自定义的消息，可以发生在事件监听中。
5. 接收服务器返回的消息。new WebSocket(url).onmessage = (data) => {}，data为服务器返回内容对象，其中data（data.data）为返回的文本内容。这一步骤可以在mounted中定义，不需要手动执行。
6. 断连检查，启动重连。再执行一次new WebSocket(url).onopen = () => {}，发生在readyState为2或3时或者其他需要重连的时候。
7. 关闭websocket连接。new WebSocket(url).onclose = () => {}，监听连接关闭。离开页面、组件注销等情况下需要关闭websocket的链接。new WebSocket(url).close()执行关闭的动作。

贴上完整代码

html代码

<span title="站内消息"  class="iconfont icon-xiaoxi" @click="showWarningInput"></span>
<el-input style="width: auto;" v-if="showInput" v-model="warningText" @change="broadcastWarning"></el-input>

 span为模拟的一个icon按钮，是站内消息发送的入口。

el-input为客户端自定义消息内容的一个容器。

data中定义的变量

        data() {return {socketObj: null, // websocket实例对象currentState: 3, // 连接状态的初始值needReConnect: false, // 标记是否需要重连warningText: null, // 客户端自定义的消息内容showInput: false, // 控制自定义内容输入框的显示隐藏状态}},

js代码

// 生命周期
mounted () {this.getUserInfo().then(() => {if('WebSocket' in window) {this.initSocket()} else {this.errorMessage('您的浏览器不支持websocket,可能会影响部分功能的使用!')}})
},
destroyed () {this.closeSocket()
},

            // 控制自定义消息输入框的显示和隐藏showWarningInput () {this.showInput = !this.showInput},// 创建websocket实例，并进行消息监听和关闭连接监听initSocket () {let url = `YOUR OWN URL`this.socketObj = new WebSocket(url)this.openSocket(() => {this.listenMsg()})this.socketObj.onclose = (closeData) => {this.currentState = parseInt(closeData.srcElement.readyState)if(this.needReConnect) {this.reConnectSocket()}}},// 检查连接状态尝试发送消息broadcastWarning () {if(parseInt(this.currentState) == 1) {this.sendMsg(this.warningText)} else {this.needReConnect = truethis.reConnectSocket()}},// 重新连接websocketreConnectSocket () {if(this.socketObj.readyState !== 0 && this.socketObj.readyState !== 1) {this.openSocket(() => {this.listenMsg()})}},// 关闭连接closeSocket () {this.needReConnect = falsethis.socketObj.close()},// 发送消息sendMsg (msg) {if(!!msg) {this.socketObj.send(msg)} else {this.errorMessage('没有广播内容不能广播哦！')}this.showInput = falsethis.warningText = null},// 客户端监听服务端返回来的消息并在浏览器中给与响应提示listenMsg () {this.socketObj.onmessage = (data) => {this.$notify({title: '警告',message: data.data,duration: 0,position: 'top-left',offset: 300,type: 'warning'})}},// 开始尝试连接服务器openSocket (callback) {this.socketObj.onopen = (backData) => {if(parseInt(backData.srcElement.readyState) == parseInt(this.socketObj.readyState)) {this.currentState = parseInt(backData.srcElement.readyState)} else {this.currentState = parseInt(this.socketObj.readyState)}switch(this.currentState) {case 1:callback()breakcase 0:console.log('等会吧，连着呢')breakcase 2:case 3:this.needReConnect = truethis.reConnectSocket()break}}},

 

这篇关于vue spa websockt 实现站内消息的发送和接收的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---