前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在Vue项目中使用WebSocket技术

在Vue项目中使用WebSocket技术

作者头像
青年码农
修改2022-05-25 14:54:26
3.3K0
修改2022-05-25 14:54:26
举报
文章被收录于专栏:青年码农

WebSocket 协议自2008年诞生2011年成为国际标准以来。目前所有浏览器都已经支持了。因此我们不需要担心在项目中使用是否会有其他问题,WebSocket实现了浏览器与服务器全双工通信,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息。

MDN上面有详细的文档,这里就不过多介绍,我们直接在vue项目上使用WebSocket,其实可以借助库实现,但是这个项目我们使用原生的,毕竟代码不多,也没必要在安装个依赖。

WebSocket属性很多,用到了onopen、onerror、onmessage和onclose,在methods方法中定义几个函数。

代码语言:javascript
复制
// 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

代码语言:javascript
复制
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了。

代码语言:javascript
复制
data() {
  return {
    path: "",
    socket: ""
  };
},
mounted() {
  // 初始化
  this.init();
},
destroyed() {
  // 销毁监听
  this.socket.onclose = this.close;
}

到这就是所有的代码,在浏览器中打开,测试下

能接收到数据,也能发送数据。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-11-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 青年码农 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档