vue使用socket与服务端进行通信的代码详解
更新时间：2023年09月24日 10:35:10 作者：谨言的鼠猫
这篇文章主要给大家介绍了vue如何使用socket与服务端进行通信的相关资料,在Vue中我们可以将Websocket类封装成一个Vue插件,以便全局使用,需要的朋友可以参考下
1、定义socket
var ws = new WebSocket('wss://地址');2、进行连接，同时每5秒钟发送心跳一次
ws.onopen = () => {
console.log('@open');
// params为与服务端定义好的参数
ws.send(JSON.stringify(params));
this.sendTimmer = setInterval(function () {
ws.send('Hi Server!');
}, 5000);
};3、获取服务端发送来的信息，进行处理
ws.onmessage = (event) => {
console.log('@message:', event);
try {
const data = JSON.parse(event.data);
if (data.end) {
//约定的单条消息传递结束
} else {
// 进行数据处理
}
} catch (err) {
// 数据错误处理
ws.close();
console.error(err);
}
if (event.data == '[DONE]') {
// 消息传递结束
this.sendTimmer && clearInterval(this.sendTimmer);
ws.close();
}
};4、关闭socket
ws.onclose = (event) => {
console.log('@close:', event);
this.sendTimmer && clearInterval(this.sendTimmer);
ws.close();
};5、判断socket发送错误
ws.onerror = (event) => {
console.error('error:', event);
// 进行错误类型判断，展示不同信息
ws.close();
};到此这篇关于vue使用socket与服务端进行通信的代码详解的文章就介绍到这了,更多相关vue socket服务端通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue-cli是 vue 官方提供的、快速生成 vue 工程化项目的工具，支持创建vue2和vue3的项目，本文给大家详细讲解vue-cli是什么及创建vue-cli项目的方法，感兴趣的朋友跟随小编一起看看吧2023-04-04
这篇文章主要给大家介绍了关于Vue前端生成UUID的相关资料,前端需要生成一个唯一标识符作为ID时,可以使用Vue UUID插件,比如生成订单号、用户ID等等,需要的朋友可以参考下2023-09-09
本篇文章主要介绍了vue省市区三联动下拉选择组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
在这篇文章中,我们将学习一下 Vue3 的全局组件注册是如何实现的,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了vue实现分页栏效果，分页栏设计的步骤与实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,这篇文章主要介绍了vue自定义tap指令及tap事件的实现 ,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了使用vue-cli脚手架工具搭建vue-webpack项目，通过几个默认的步骤帮助你快速的构建Vue.js项目。非常具有实用价值，需要的朋友可以参考下2019-01-01
今天小编就为大家分享一篇vue 使用鼠标滚动加载数据的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了vue-preview动态获取图片宽高并增加旋转功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue-axios-post数据后端接不到问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
最新评论