您现在的位置是:首页 > Javascript
当前栏目
在Vue项目中使用WebSocket技术
2023-03-15 21:59:14 时间
WebSocket 协议自2008年诞生2011年成为国际标准以来。目前所有浏览器都已经支持了。因此我们不需要担心在项目中使用是否会有其他问题,WebSocket实现了浏览器与服务器全双工通信,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息。
MDN上面有详细的文档,这里就不过多介绍,我们直接在vue项目上使用WebSocket,其实可以借助库实现,但是这个项目我们使用原生的,毕竟代码不多,也没必要在安装个依赖。
WebSocket属性很多,用到了onopen、onerror、onmessage和onclose,在methods方法中定义几个函数。
// socket连接成功
open() {
console.log("socket连接成功");
},
// socket连接失败
error() {
console.log("连接错误");
},
// 接收消息
getMessage(msg) {
console.log("==websocket接收数据==");
console.log(msg.data);
},
// 发送数据
send() {
this.socket.send("这是传送数据");
},
// 关闭socket
close() {
console.log("socket已经关闭");
}
接下来初始化方法,实例化socket
init() {
if (typeof WebSocket === "undefined") {
alert("您的浏览器不支持socket");
} else {
// 实例化socket
this.socket = new WebSocket(this.path);
// 监听socket连接
this.socket.onopen = this.open;
// 监听socket错误信息
this.socket.onerror = this.error;
// 监听socket消息
this.socket.onmessage = this.getMessage;
}
},
方法都定义完成了,剩下就是初始化socket和关闭socket了。
data() {
return {
path: "",
socket: ""
};
},
mounted() {
// 初始化
this.init();
},
destroyed() {
// 销毁监听
this.socket.onclose = this.close;
}
到这就是所有的代码,在浏览器中打开,测试下
能接收到数据,也能发送数据。
相关文章
- ALSTOM MAVS01L1AB0501D 数据电报的形式在总线上发送
- js 实现通过身份证获取年龄
- js 实现随机生成UUID
- js 实现 encode64 加密
- 第 6 章 Netty 核心模块组件
- 火爆Boss直聘的百页SpringBoot原理实战+面试题助你狂拿千份offer
- 网页设计有什么标准?细说网页设计的6大规范
- vue 里怎么通过魔数(magic number)去限制上传文件类型?
- 防止代码变质的思考与方法
- 为何要从Web form过渡到MVC中
- 高级程序员应该具备什么能力
- Web服务小姐的嫁衣 (五)
- Web服务小姐的嫁衣 (三)
- Web服务小姐的嫁衣 (二)
- 交互设计中的默认值
- 轻松掌握AJAX(jQuery)异步通信
- 十大最佳第二职业榜:软件开发、UI设计上榜
- 使用jQ Ajax时需要注意的一个问题
- jQuery翻牌或百叶窗效果
- 流畅的验证组件:FluentValidation