vue实现websoket即时通讯

vue实现WebSoket及时通讯

话不多少上代码
utils里新建websoket.js

import Vue from 'vue'
import { Message } from 'element-ui'
let v = new Vue()
v.$message = Message;
var webSocket = null;
var isConnect = false; //连接状态
var globalCallback = function(e){ console.log(e) };//定义外部接收数据的回调函数
var reConnectNum = 0;//重连次数
let userId = sessionStorage.getItem("userId")
var websocketUrl =  `ws://192.168.220.111:9080/websocket/${userId}`;//心跳设置
var heartCheck = {heart:"heart",//心跳包timeout: 45 * 1000, //每段时间发送一次心跳包 这里设置为60sheartbeat: null, //延时发送消息对象(启动心跳新建这个对象，收到消息后重置对象)start: function () {this.heartbeat = setInterval(()=>{if (isConnect){webSocketSend(this.heart);}else{this.clear();}}, this.timeout);},reset: function () {clearInterval(this.heartbeat);this.start();},clear:function(){clearInterval(this.heartbeat);}
}//初始化websocket
function initWebSocket(callback) {//此callback为在其他地方调用时定义的接收socket数据的函数if(callback){if(typeof callback == 'function'){globalCallback = callback     }else{throw new Error("callback is not a function")}}if ("WebSocket" in window) {webSocket = new WebSocket(websocketUrl);//创建socket对象} else {Message({message: '该浏览器不支持websocket!',type: 'warning'});return}//打开webSocket.onopen = function() {webSocketOpen();};//收信webSocket.onmessage = function(e) {webSocketOnMessage(e);};//关闭webSocket.onclose = function(e) {webSocketOnClose(e);};//连接发生错误的回调方法webSocket.onerror = function(e) {webSocketonError(e);};
}
//连接socket建立时触发
function webSocketOpen() {console.log("WebSocket连接成功");//首次握手webSocketSend(heartCheck.heart);isConnect = true;heartCheck.start();reConnectNum = 0;
}//客户端接收服务端数据时触发,e为接受的数据对象
function webSocketOnMessage(e) {console.log("websocket信息:");console.log(e.data)if(e.data == "stopUser") {Message({message: '你已被上级管理员停用即将跳转登录页',type: 'warning'});setTimeout(() => {window.location.href = vueConfig.jqUrl + "vue/web/login"}, 3000);}const data = JSON.parse(e.data);//根据自己的需要对接收到的数据进行格式化globalCallback(data);//将data传给在外定义的接收数据的函数，至关重要。
}//socket关闭时触发
function webSocketOnClose(e){heartCheck.clear();isConnect = false; //断开后修改标识console.log(e)console.log('webSocket已经关闭 (code：' + e.code + ')')//被动断开，重新连接if(e.code == 1006){if(reConnectNum < 3){initWebSocket();++reConnectNum;}else{v.$message({message: 'websocket连接不上，请刷新页面或联系开发人员!',type: 'warning'});}}
}//连接发生错误的回调方法
function webSocketonError(e){heartCheck.clear();isConnect = false; //断开后修改标识console.log("WebSocket连接发生错误:");console.log(e);
}//发送数据
function webSocketSend(data) {webSocket.send(JSON.stringify(data));//在这里根据自己的需要转换数据格式
}
//在其他需要socket地方主动关闭socket
function closeWebSocket(e) {webSocket.close();heartCheck.clear();isConnect = false;reConnectNum = 0;
}
//在其他需要socket地方接受数据
function getSock(callback) {globalCallback = callback
}
//在其他需要socket地方调用的函数，用来发送数据及接受数据
function sendSock(agentData) {//下面的判断主要是考虑到socket连接可能中断或者其他的因素，可以重新发送此条消息。switch (webSocket.readyState) {//CONNECTING：值为0，表示正在连接。case webSocket.CONNECTING:setTimeout(function() {sendSock(agentData, callback);}, 1000);break;//OPEN：值为1，表示连接成功，可以通信了。case webSocket.OPEN:webSocketSend(agentData);break;//CLOSING：值为2，表示连接正在关闭。case webSocket.CLOSING:setTimeout(function() {sendSock(agentData, callback);}, 1000);break;//CLOSED：值为3，表示连接已经关闭，或者打开连接失败。case webSocket.CLOSED:// do somethingbreak;default:// this never happensbreak;}
}export default {initWebSocket,closeWebSocket,sendSock,getSock
};

main.js引入挂载原型

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import axios from "./utils/api/index";
import utils from "./utils";
import socketApi from "./utils/websocket";
Vue.prototype.$socketApi = socketApi;//websocket挂在原型上

3.使用

 beforeDestroy() {//销毁的生命周期this.$socketApi.closeWebSocket();},mounted() {//挂载的生命周期this.$socketApi.initWebSocket(this.getsocketResult);},methods: {// socket信息返回接受函数getsocketResult(data) {console.log(data);},//发送socket信息websocketSend(data) {this.$socketApi.sendSock(data);},},

注意的点

vue3 Content Security Policy: 升级不安全的请求,会有强制跳转https的问题
ws会替换成wss的请求会一直连接不上

public下的index.html 里meat头要去掉

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

最后你就大功告成

vue实现websoket即时通讯相关推荐

在VUE中利用MQTT协议实现即时通讯
前言建议先阅读: 在Node.js下运用MQTT协议实现即时通讯及离线推送以前尝试在vue中用上mqtt,了解到mqtt实质上是基于websocket进行数据通信,所以上文中在node下实现的服务 ...
仿微信 java IM即时通讯 | uni-app IM即时通讯 | vue IM即时通讯桌面端 | 源码出售
仿微信 uniapp IM 即时通讯源码 & 即时通讯知识小科普源码,不加密,方便二开! 私有云服务,高效稳定,数据安全,无第三方服务拓展性强,可拓展任意的消息体类型! 性能优秀,资源足 ...
推荐：一款Java开源的Springboot 即时通讯 IM 聊天系统
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 # 开篇电商平台最不能缺的就是即时通讯,例如通知类下发,客服聊天 ...
websocket 发送图片_基于WebSocket的web端IM即时通讯应用的开发
基于WebSocket的web端IM即时通讯应用的开发功能列表: 1.Web端的IM即时通讯应用 2.支持上线.下线.实时在线提醒 3.单聊.群聊的建立 4.普通文字.表情.图片的传输(子定义富文本 ...
SpringCloud工作笔记060---SpringBoot中使用WebSocket实现即时通讯_实现呼叫中心业务封装
JAVA技术交流QQ群:170933152 ---------------我们主要用这个来转接,呼叫中心发过来的分机电话呼叫中心:呼叫过程,首先呼叫中心运营商给个,api手册,api会规定,首先登陆 ...
开源即时通讯IM框架MobileIMSDK的Uniapp端开发快速入门
► 相关链接: ① MobileIMSDK-Uniapp端的详细介绍 ② MobileIMSDK-Uniapp端的开发手册new(* 精编PDF版) 一.理论知识准备您需要对Uniapp和Vue开发 ...
全开源即时通讯(IM)系统-仿微信
1. 什么是E聊SDK E聊是一套面向个人的免费开源通用的即时通讯组件,支持发送红包,推送商品信息等.SDK能够更加容易地赋予客户IM能力,使客户可以快速的在自有产品上添加聊天功能.使用E聊SDK可以 ...
环信即时通讯SDK集成——环信 uni-app-demo 升级改造计划——整体代码重构优化（二）
概述本次关于 uni-app 代码整体重构工作,基于上一期针对 uni-app 官网 demo 从 vue2 迁移 vue3 框架衍生而来,在迁移过程中有明显感知,目前的项目存在的问题为,项目部分代 ...
IM 即时通讯实战：环信Web IM极速集成
前置技能 Node.js 环境已搭建. npm 包管理工具的基本使用. Vue2 或者 Vue3 框架基本掌握或使用. 学习目标项目中集成 IM 即时通讯实战利用环信 IM Web SDK 快速实 ...
IM即时通讯-从0到1的实践（一）
先立个小目标:实现单聊何为单聊呢:两个人之间的聊天,相对群聊而言麻雀虽小五脏俱全,虽然说单聊是个小目标,但也在纵向上实现了IM即时通讯,也就是说包含了IM即时通讯必要的知识点. 需求细化: 1. ...

vue实现websoket即时通讯

vue实现WebSoket及时通讯

vue实现websoket即时通讯相关推荐

最新文章

热门文章