websocket + stomp+ sockJs实现消息分部门推送

1,756

这是我参与8月更文挑战的第2天,活动详情查看:8月更文挑战

背景介绍

websocket: 很多网站为了实现推送技术,所用的技术都是轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

项目需求:

之前的项目用的是原始的webSocket实现后台消息的主动推送,详细实现可查看www.runoob.com/html/html5-…

但是本次需求是所有已连接的用户需要接受到的消息是不一样的,只需要接受自己部门相关的案件消息。后端要求前端来实现根据不同的用户订阅发送不同的订阅请求。

使用方法

1、安装

npm install sockjs-client@ 1.5.1

npm install stompjs@2.3.3

项目使用的版本是"sockjs-client": "^1.5.1","stompjs": "^2.3.3"

2、引入模块

import SockJS from 'sockjs-client';

import Stomp from 'stompjs';

3、业务相关代码

//websocket的url地址http://10..../../webSocket 
this.sockjsUrl=
        process.env.NODE_ENV === 'development'
          ? '/api/avc-web/webSocket'
          : `${protocol}//${host}/${process.env.VUE_APP_CONTEXT}/webSocket`
async connection() {
      const {
        data: { deptIndexCode }
      } = await getCurUser(); //从接口获取部门参数
      var _this = this;
      // 建立连接对象
      let socket = new SockJS(this.sockjsUrl);
      // 获取STOMP子协议的客户端对象
      this.stompClient = Stomp.over(socket);
      // 定义客户端的认证信息,按需求配置
      let headers = {
        Authorization: ''
      };
      // 向服务器发起websocket连接
      this.stompClient.connect(
        headers,
        function(res) {
        _this.stompClient.subscribe(`/topic/${deptIndexCode}`, function(msg) {
            // _this.arrys.unshift(JSON.parse(msg.body));
                console.log(JSON.parse(msg.body));
                const newObj = JSON.parse(msg.body);
            });
        },
        function(error) {
          // 连接发生错误时的处理函数
          console.log('失败');
          console.log(error);
        }
    );
},