vue 项目中使用websocket的正确姿势

2024-07-29 08:41:58

1. 在utils下新建websocket.js文件

// import { showInfoMsg, showErrorMsg } from '@/utils/popInfo'
import ElementUI from 'element-ui';
function initWebSocket(e) {
    console.log(e)
    const wsUri = WS_API + "/webSocket/" + e;
    this.socket = new WebSocket(wsUri)//这里面的this都指向vue
    this.socket.onerror = webSocketOnError;
    this.socket.onmessage = webSocketOnMessage;
    this.socket.onclose = closeWebsocket;
}
function webSocketOnError(e) {
    ElementUI.Notification({
        title: '',
        message: "WebSocket连接发生错误" + e,
        type: 'error',
        duration: 0,
    });
}
function webSocketOnMessage(e) {
    const data = JSON.parse(e.data);
    console.log(data.msgType === "INFO", data.msgType === "INFO")
    if (data.msgType === "INFO") {
        ElementUI.Notification({
            title: '',
            message: data.msg,
            type: 'success',
            duration: 3000,
        });

    } else if (data.msgType === "ERROR") {
        ElementUI.Notification({
            title: '',
            message: data.msg,
            type: 'error',
            duration: 0,
        });
    }
}
// 关闭websiocket
function closeWebsocket() {
    console.log('连接已关闭...')
}
function close() {
    this.socket.close() // 关闭 websocket
    this.socket.onclose = function (e) {
        console.log(e)//监听关闭事件
        console.log('关闭')
    }
}
function webSocketSend(agentData) {
    this.socket.send(agentData);
}
export default {
    initWebSocket, close
}

如果想刷新重新链接websocket 可以在App.vue页面里添加个钩子函数

 mounted() {
    //当在任一路由页面被刷新时,便是根组件app被从新建立,此时能够进行webSocket重连
    //从localStorage中获取用户信息,是登陆状态则能够进行webSocket重连
    let token = localStorage.getItem("token");
    if (token) {
      // userMessage = JSON.parse(userMessage);
      this.$websocket.initWebSocket(token);
    }
  },

客户端主动关闭websocket 在关闭的地方触发函数就可以

 logout() {
      // localStorage.clear();
      localStorage.removeItem("token");
      this.$websocket.close();
      this.$store.dispatch("LogOut").then(() => {
        location.reload();
      });
    },

注：$webSocket 是在main.js中全局注册了websocket.js文件

到此这篇关于vue 项目中使用websocket的文章就介绍到这了,更多相关vue使用websocket内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue使用WebSocket模拟实现聊天功能

效果展示两个浏览器相互模拟 1.创建模拟node服务在vue根目录下创建 server.js 文件模拟后端服务器 **在server终端目录下载 ** npm install --s ws 2.编写server.js文件代码如下 var userNum = 0; //统计在线人数 var chatList = [];//记录聊天记录 var WebSocketServer = require('ws').Server; wss = new WebSocketServer({ port: 8
vue使用websocket的方法实例分析

本文实例讲述了vue使用websocket的方法.分享给大家供大家参考,具体如下: 最近项目需要使用到websocket 但是框架是vue 网上查阅很多资料 vue-websocket 老是连接不上索性就不适用封装的插件了,直接使用原生的websocket 我这边需求是只需要接受就好不需要发送代码如下: 爬坑之路:vue里面this指向问题第一版使用原生js mounted(){ console.log(this)---------------------------------
vue使用webSocket更新实时天气的方法

目录前言关于 webSocket 的操作及示例: webSocket 1.关于 webSocket 2.与 AJAX 轮的区别 3.webSocket 事件 4. 一个简单的示例天气更新图片素材重连机制前言在 vue 中使用 webSocket 做一个简单的天气实时更新模块. 关于 webSocket 的操作及示例: 1.webSocket 连接 2.接收数据 3.重连机制 webSocket 1.关于 webSocket webSocket 是 HTML5 开始提供的一种在单个
在vue中使用SockJS实现webSocket通信的过程

最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面我就来讲一下我的实现过程: socksjs •客户端和服务器端api尽可能简洁,尽量靠近websocket api •支持服务端扩展和负载均衡技术 •传输层应该全面支持跨域通信 •如果受到代理服务器的限制,传输层能优雅地从一种方式回退到另一种方式 •尽可能快地建立连接 •客户端只是纯
vue 项目中使用websocket的正确姿势

1. 在utils下新建websocket.js文件 // import { showInfoMsg, showErrorMsg } from '@/utils/popInfo' import ElementUI from 'element-ui'; function initWebSocket(e) { console.log(e) const wsUri = WS_API + "/webSocket/" + e; this.socket = new WebSocket(wsUri)
vue项目中使用websocket的实现

什么是websocket? “WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输.在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道.两者之间就直接可以数据互相传送.
在vue项目中正确使用iconfont的方法

1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3.下载至本地 4.把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下(可创建一个css文件或iconfont文件) 5.在main.js中引入iconfont.css样式 import './assets/iconfont/iconfont.css' 6.在在vue文件中引用<i class="iconfont icon-zitigui-xianx
vue项目中引入noVNC远程桌面的方法

1 .首先,先简单介绍一下概念. VNCServer 是一个为了满足分布式用户共享服务器资源,而在服务器开启的一项服务,对应的客户端软件有图形化客户端 VNCViewer,而 noVNC 则是 HTML5 VNC 客户端,它采用 HTML 5 WebSocket, Canvas 和 JavaScript 实现. noVNC 被普遍用在各大云计算.虚拟机控制面板中.noVNC 采用 WebSockets 实现,但是当前大多 VNC 服务器不支持 WebSocket,所以 noVNC 不能直连 VN
详解如何在vue项目中使用layui框架及采坑

根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui 1.第一个坑:vue项目中使用npm安装引入时报错(目前并没有找到引入的合适的方式,知道的可以留言探讨) 在官网中我们可以看到他提到支持npm安装,但是当我们安装成功后,在main.js中引入时却报并不能找到该模块的错. 所以,我们先下载文件包,然后在html文件中用link和script标签的方式引入 2
详解如何使用webpack在vue项目中写jsx语法

本文介绍了如何使用webpack在vue项目中写jsx语法,分享给大家,具体如下: 我们知道Vue 2.0中对虚拟DOM的支持.我们可以通过JavaScript动态的创建元素,而不用在template中写HTML代码.虚拟DOM最终将被渲染为真正的DOM. data: { msg: 'Hello world' }, render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] ); } 渲染后的内容为: <div id=
如何去除vue项目中的#及其ie9兼容性

一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'menu', component: menu, children: [ { path: 'organization', component: organization, children: [ { path:
Vue项目中设置背景图片方法

在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {
bing Map 在vue项目中的使用详解

写在最前面拥有全球数据库国内好像就只有百度地图有,高德.搜狗.腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap. bing Map 使用教程(基础) 参考文档:bing Map 官方教程 bing Map 初始化引入bing map资源 <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&k
Vue项目中使用Vux的安装过程

最近想用vue+vux写一个项目,于是到vux的官网看了文档开始着手搭建项目,但是遇到一些坑.下面简单说下安装vux 的过程. 默认已安装vue环境 1.安装vux npm install vux --save-dev 2.安装vux-loader npm install vux-loader --save-dev //官网没提安装这个,但是不安装会报错 3.安装less-loader以正确编译less源码 npm install less less-loader --save-dev 4.安装

vue 项目中使用websocket的正确姿势

1. 在utils下新建websocket.js文件

相关推荐

随机推荐