signalR+websocket:实现消息实时通讯——技能提升

signalR

解决步骤1:npm install @microsoft/signalr@6.0.6

安装指定版本的@microsoft/signalr,我这边安装的版本是6.0.6

解决步骤2:引入import * as signalR from '@microsoft/signalr';

import * as signalR from '@microsoft/signalr';

下面第三步会用到token,所以此处也先引用一下cookie
import Cookie from 'js-cookie';

解决步骤3:使用方法

js 复制代码
let hubUrl = process.env.VUE_APP_API_BASE_URL + '/my_hub';
var token = Cookie.get('Authorization');
token = token.replace('Bearer', '').trim();
this.connection = new signalR.HubConnectionBuilder()
  .withUrl(hubUrl, { accessTokenFactory: () => token })
  .withAutomaticReconnect()
  .build();
this.connection
  .start()
  .then(() => {
    // 连接成功后,订阅消息
    console.log('连接成功后,订阅消息');
  })
  .catch((err) => {
    // 连接异常时的处理
    console.log('连接异常时的处理');
  });
//自动重连成功后的处理
this.connection.onreconnected((connectionId) => {
  console.log(connectionId);
});
this.connection.on('ReceiveMessage', (message) => {
  console.log(message.split('::')[0]);
  this.$notification.info({
    message: message.split('::')[0],
    description: message.split('::')[1],
    onClick: () => {
      console.log('Notification Clicked!');
    },
    duration: 4.5,
  });
});

websocket

解决步骤1:定义参数

js 复制代码
data(){
	return{
	  websocket: null,
      setIntervalWesocketPush: null,
      againSocket: true,
	}
}

解决步骤2:初始化websocket

js 复制代码
initWebSocket() {
  let that = this;
  var websocket = null;
  if ('WebSocket' in window) {
    websocket = new WebSocket('wss://echo.websocket.org/');
  } else {
    alert('该浏览器不支持websocket!');
  }
  websocket.onopen = function (event) {
    console.log('建立连接');
    websocket.send('Hello WebSockets!');
  };
  websocket.onclose = function (event) {
    console.log('连接关闭');
    that.reconnect(); //尝试重连websocket
  };
  //建立通信后,监听到后端的数据传递
  websocket.onmessage = function (event) {
    console.log(event);
  };
  websocket.onerror = function () {
    // notify.warn("websocket通信发生错误!");
    // initWebSocket()
  };
  window.onbeforeunload = function () {
    websocket.close();
  };
},

解决步骤3:断连后的重连

js 复制代码
// 重连
reconnect() {
  console.log('正在重连');
  // 进行重连
  setTimeout(() => {
    this.initWebSocket();
  }, 1000);
},
相关推荐
网硕互联的小客服10 分钟前
未来趋势:AI与量子计算对服务器安全的影响
运维·服务器·网络·网络安全·量子计算
黑客老李18 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
是阿建吖!25 分钟前
【Linux | 网络】网络基础
linux·网络
W说编程27 分钟前
物联网通信技术全景剖析:从LoRa到5G的深度对比与选型指南
网络·物联网·5g·射频工程
cui_win1 小时前
【网络】Linux 内核优化实战 - net.ipv4.tcp_timestamps
linux·网络·tcp/ip
Clownseven1 小时前
Shell 脚本实战指南:内网 ARP 洪泛监控与飞书/邮件自动告警
网络·php·飞书
不羁。。2 小时前
【网络协议安全】任务12:二层物理和单臂路由及三层vlanif配置方法
网络·智能路由器
诗句藏于尽头9 小时前
完成ssl不安全警告
网络协议·安全·ssl
会飞的鱼先生12 小时前
Node.js-http模块
网络协议·http·node.js
Me4神秘15 小时前
电信、移动、联通、广电跨运营商网速慢原因
网络