做响应式网站多少钱,云南专业网站制作公司,做网页的网站叫什么软件,西安传媒公司前言 websocket双向通讯在项目中经常使用#xff0c;但一般都是封装成第三方包#xff0c;登录#xff0c;退出建立连接。 这样使用是合理#xff0c;但不便于测试#xff0c;其实在.vue页面通过new方式可以直接使用websocket。 在页面实例加载完成之后连接websocket但一般都是封装成第三方包登录退出建立连接。 这样使用是合理但不便于测试其实在.vue页面通过new方式可以直接使用websocket。 在页面实例加载完成之后连接websocket在组件销毁时候断开websocket连接。 注意具体情况要跟后端对接比如唯一值比如token是不是一对一发还是一对多发链表。
细节-websocket方法拆解 通过new WebSocket来获取websocket实例在页面实例加载完毕建立连接 实例.onopen地址- 在页面实例加载完毕建立连接 实例.onclose - 在页面销毁之前销毁websocket实例 实例.onmessage数据- 后端使用send发送给前端时候就会触发这个函数方法带参数 实例.onerror - 在websocket断开连接连接错误时就会触发这个函数方法 实例.send数据- 向后端发送数据-后端同样用onmessage接收到数据 send方法发送数组对象数据时需要转成字符串形式 JSON.stringify(数据)。
代码如下
templatedivbutton clicksend发消息/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建立连接用于测试 有了初步的深刻印象但在实际开发中我 们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。加油打工人 什么不足的地方请大家指出谢谢 -- 風过无痕
