在Vue项目中使用WebSocket技术

简介: 在Vue项目中使用WebSocket技术

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("这是传送数据");},// 关闭socketclose(){  console.log("socket已经关闭");}

接下来初始化方法,实例化socket

init(){  if(typeof WebSocket ==="undefined"){    alert("您的浏览器不支持socket");  }else{    // 实例化socket    this.socket =newWebSocket(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;}

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

image.png

添加描述

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

相关文章
|
18天前
|
JavaScript 前端开发 C++
Vue3视图渲染技术(1)
Vue3视图渲染技术(1)
15 0
Vue3视图渲染技术(1)
|
16天前
|
NoSQL Redis Python
技术经验分享:Django实现websocket
技术经验分享:Django实现websocket
12 0
|
10天前
|
JavaScript
文本,wangEditor5的基本使用,开发文档地址,wangEditor5用于Vue3项目,想要使用好wangEditor项目,得看开发文档
文本,wangEditor5的基本使用,开发文档地址,wangEditor5用于Vue3项目,想要使用好wangEditor项目,得看开发文档
|
14天前
|
JavaScript 开发工具 git
大事件项目40---Vue代码里如何引入相对路径图片
大事件项目40---Vue代码里如何引入相对路径图片
|
17天前
Vue3项目 小兔鲜问题总结
Vue3项目 小兔鲜问题总结
19 2
|
18天前
|
JavaScript 前端开发 API
Vue3入门 - vue3相比于vue2的优点,及如何创建Vue3项目
Vue3入门 - vue3相比于vue2的优点,及如何创建Vue3项目
|
4天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的技术人人享美食平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的技术人人享美食平台附带文章源码部署视频讲解等
6 0
|
8天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的业财票务一体项目管理系统 附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的业财票务一体项目管理系统 附带文章源码部署视频讲解等
12 0
|
8天前
|
监控 网络协议 Java
Java中的WebSocket实时通信技术详解
Java中的WebSocket实时通信技术详解
|
9天前
|
JavaScript
vue3 创建项目、安装依赖、启动项目
vue3 创建项目、安装依赖、启动项目
9 0