AI专业者开发社区 1 号成员
  •  0 回帖  •  23 浏览  •  4 个月前
 

vue使用SockJS实现webSocket通信

以前使用 websocket 都是使用

window.webSocket = new WebSocket('ws://' + config.webSocketUrl + '/webData/websocket?token=' + token + '&username=' + username);
这种方式进行操作。由于项目要求，需要访问网关因此需要使用 http 的连接方式进行 socket 信息推送，以下用的是 SockJS。
# 2020-02-19 更新
在项目前期开发，我们都是在全局的 js 文件中定义 socket 的连接 ip 和端口，在页面调用。但在项目优化过程中，我们希望可以直接使用 webpack 的代理模式，直接通过代码进行请求，这样页面就不需要进行 socket 地址的配置。
优点：（1）页面减少全量变量的配置；（2）系统方法调用的统一性，和其他普通的接口调用代理一致。
缺点：（1）由于在页面中配置的代理，而不是直接请求 http:xxxx, 导致需要在代理服务器中（例如 ngnix）上多添加一个代理配置。相当于把以前 http 的直接请求方式变成代理转发请求。
具体更改模式为：
　　1、在自定义的 websocket.js 文件中，创建 SockJS 对象：
新写法：const socket = new SockJS('/bullet');// 连接 SockJS 的 endpoint 名称为 "bullet"
　　　 旧写法：let socket = new SockJS('http://'+config.webSocketUrl+'/bullet');// 连接 SockJS 的 endpoint 名称为 "bullet"
　　2、在项目根目录下的 config/index.js 文件中（vue-cli2.0）, 或者 vue.config.js（vue-cli3.0）添加代理配置即可。
?
1
2
3
4
5
6
7
8
9
proxyTable: {
  '/bullet': {
    target: target,　　//target为目标变量
    ws: true,
    pathRewrite: {
      '^/bullet': '/bullet'
    },
  }
},

　　　　

 

# 2019-04-11 更新
随着项目的模块化，需要把 websocket 相关的功能独自创建一个模块进行引入使用，以下是本人的操作方式：
1. 在 utils 目录下创建一个 js 文件，可以命名为：websocket.js


2. 在 websocket.js 文件中写入相关的 socket.io 代码
说明：config.webSocketUrl 是一个 url 地址的变量。主要是在 vue 项目中的 static 文件夹下创建一个 js 文件（不会被 webpack 压缩），定义全局常量、变量，并在 index.html 中做为一个原生的 js 文件使用 <script> 标签引入即可。在项目部署过程中，直接修改 js 文件，即可对相应的数据进行更改。
// socket 功能
import SockJS from "sockjs-client";
import Stomp from "stompjs";
import store from "../store";

export function connectionSocket() {
let socket = new SockJS('http://'+config.webSocketUrl+'/bullet');//连接 SockJS 的 endpoint 名称为 "bullet"
console.log('socket 连接地址：'+'http://'+config.webSocketUrl+'/bullet');
// 获取 STOMP 子协议的客户端对象
let stompClient = Stomp.over(socket);
// 定义客户端的认证信息, 按需求配置
let headers = {
Authorization:store.getters.token
};


// 拦截输出的一大堆垃圾信息
stompClient.debug = function (str) {
$("#debug").append(str + "\n");
};
// 向服务器发起 websocket 连接
stompClient.connect(headers,() => {
stompClient.subscribe('/topic/getResponse', (response) => { // 订阅服务端提供的某个 topic
if (response.body) {
const repObj = JSON.parse(response.body);
if (repObj.data.webSocketType == 'ISEVehicle') { //监控管理，新版车辆监控
if (repObj.status == 200) {
store.dispatch('carMonitorFun', repObj);
}  else if (repObj.data.webSocketType == 'vehicleAlarm') { //首页，车辆告警数据推送
if (repObj.status == 200) {
store.commit('vehicleAlarmMUTA', repObj.data);
}
}
}
});
stompClient.subscribe('/user/'+store.getters.userRegionCode+'/queue/getResponse', (response) => { // 订阅服务端提供的某个 topic
if (response.body) {
const repObj = JSON.parse(response.body);
if (repObj.data.webSocketType == 'personAlarm') { //首页，人脸预警数据推送
if (repObj.status == 200) {
store.commit('personAlarmMUTA', repObj.data);
}
}
else if (repObj.data.webSocketType == 'vehicleAlarm') { //首页，车辆告警数据推送
if (repObj.status == 200) {
store.commit('vehicleAlarmMUTA', repObj.data);
}
}
}
});
stompClient.subscribe('/user/'+store.getters.token+'/queue/getResponse', (response) => { // 订阅服务端提供的某个 topic
if (response.body) {
let repObj = JSON.parse(response.body);
if (repObj.data.webSocketType =='task') { store.commit('monitorStatus', repObj);} //任务列表//当监控到 websocket 有数据返回的时候，修改 monitorStatus 使其发生变化即可
else if (repObj.data.webSocketType == 'networkConfig') { store.commit('monitorStatusMUTA', repObj);}//联网配置


      }
});
}, (err) => {
// 连接发生错误时的处理函数
console.log('失败')
});
}

　　3. 在页面需要初始化的地方因为该 js 文件即可

 

 


# 2018-12-13 创建
先安装 sockjs-client 和 stompjs 
?
1
2
npm install sockjs-client
npm install stompjs　　
import SockJS from  'sockjs-client';
import  Stomp from 'stompjs';
export default {data(){
        return {
            stompClient:'',
            timer:'',
        }
    },
    methods:{initWebSocket() {
            this.connection();
            let that= this;
            // 断开重连机制, 尝试发送消息, 捕获异常发生时重连
            this.timer = setInterval(() => {
                try {
                    that.stompClient.send("test");} catch (err) {
                    console.log("断线了: " + err);
                    that.connection();}
            }, 5000);},  
        connection() {
            // 建立连接对象
            let socket = new SockJS('http://10.10.91.4:8081/ws');
            // 获取 STOMP 子协议的客户端对象
            this.stompClient = Stomp.over(socket);
            // 定义客户端的认证信息, 按需求配置
            let headers = {
                Authorization:''
            }
            // 向服务器发起 websocket 连接
            this.stompClient.connect(headers,() => {
                this.stompClient.subscribe('/topic/public', (msg) => { // 订阅服务端提供的某个 topic
                    console.log('广播成功')console.log(msg);  // msg.body 存放的是服务端发送给我们的信息
                },headers);
                this.stompClient.send("/app/chat.addUser",
                    headers,
                    JSON.stringify({sender: '',chatType: 'JOIN'}),)   //用户加入接口
            }, (err) => {
                // 连接发生错误时的处理函数
                console.log('失败')console.log(err);
            });},    //连接 后台
        disconnect() {
            if (this.stompClient) {
                this.stompClient.disconnect();}
        },  // 断开连接
    },
    mounted(){
        this.initWebSocket();},
    beforeDestroy: function () {
        // 页面离开时断开连接, 清除定时器
        this.disconnect();
        clearInterval(this.timer);}
}
 
net
npm install net