vue-页面使用websocket建立连接用于测试

前言

websocket双向通讯在项目中经常使用，但一般都是封装成第三方包，登录，退出建立连接。
这样使用是合理，但不便于测试，其实在.vue页面通过new方式可以直接使用websocket。
在页面实例加载完成之后连接websocket，在组件销毁时候断开websocket连接。
注意具体情况要跟后端对接，比如唯一值（比如token），是不是一对一发，还是一对多发（链表）。

细节-websocket方法拆解

通过new WebSocket来获取websocket实例，在页面实例加载完毕建立连接
实例.onopen（地址）- 在页面实例加载完毕建立连接
实例.onclose - 在页面销毁之前销毁websocket实例
实例.onmessage（数据）- 后端使用send发送给前端时候就会触发这个函数方法（带参数）
实例.onerror - 在websocket断开连接，连接错误时就会触发这个函数方法
实例.send（数据）- 向后端发送数据-后端同样用onmessage接收到数据
send方法发送数组对象数据时，需要转成字符串形式（ JSON.stringify(数据)）。

代码如下

<template><div><button @click="send">发消息</button></div>
</template>

<script>
export default {data () {return {path:"ws://192.168.0.200:8005/后端模块路径/唯一标识（token）",socket:""}},mounted () {// 初始化this.init()},methods: {init: function () {if(typeof(WebSocket) === "undefined"){alert("您的浏览器不支持socket")}else{// 实例化socketthis.socket = new WebSocket(this.path)// 监听socket连接this.socket.onopen = this.open// 监听socket错误信息this.socket.onerror = this.error// 监听socket消息this.socket.onmessage = this.getMessage}},open: function () {console.log("socket连接成功")},error: function () {console.log("连接错误")},getMessage: function (msg) {console.log(msg.data)},// 向后端发送信息send: function () {this.socket.send(params)},close: function () {console.log("socket已经关闭")}},destroyed () {// 销毁监听this.socket.onclose = this.close}
}
</script>

<style>

</style>

总结：

经过这一趟流程下来相信你也对 vue-页面使用websocket建立连接用于测试有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！