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(''+config.webSocketUrl+'/bullet');//连接SockJS的endpoint名称为"bullet"
  2、在项⽬根⽬录下的config/index.js⽂件中（vue-cli2.0），或者fig.js（vue-cli3.0）添加代理配置即可。
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>标签引⼊即可。在项⽬部署过程中，直接修// socket功能
import SockJS from"sockjs-client";
import Stomp from"stompjs";
import store from"../store";
export function connectionSocket() {
let socket = new SockJS(''+config.webSocketUrl+'/bullet');//连接SockJS的endpoint名称为"bullet"
console.log('socket连接地址：'+''+config.webSocketUrl+'/bullet');
// 获取STOMP⼦协议的客户端对象
let stompClient = Stomp.over(socket);
// 定义客户端的认证信息，按需求配置
let headers = {
s.token
};
// 拦截输出的⼀⼤堆垃圾信息
stompClient.debug = function (str) {
$("#debug").append(str + "\n");
};
// 向服务器发起websocket连接
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) {
storemit('vehicleAlarmMUTA', repObj.data);
}
}
}
});
stompClient.subscribe('/user/'+s.userRegionCode+'/queue/getResponse', (response) => { // 订阅服务端提供的某个topic
if (response.body) {
const repObj = JSON.parse(response.body);
if (repObj.data.webSocketType == 'personAlarm') { //⾸页，⼈脸预警数据推送
if (repObj.status == 200) {
storemit('personAlarmMUTA', repObj.data);
}
}
else if (repObj.data.webSocketType == 'vehicleAlarm') { //⾸页，车辆告警数据推送
if (repObj.status == 200) {
storemit('vehicleAlarmMUTA', repObj.data);
}
}
}
});
stompClient.subscribe('/user/'+ken+'/queue/getResponse', (response) => { // 订阅服务端提供的某个topic
if (response.body) {
let repObj = JSON.parse(response.body);
if (repObj.data.webSocketType =='task') { storemit('monitorStatus', repObj);} //任务列表//当监控到websocket有数据返回的时候，修改monitorStatus使其发⽣变化即可
else if (repObj.data.webSocketType == 'networkConfig') { storemit('monitorStatusMUTA', repObj);}//联⽹配置
}
});
}, (err) => {
// 连接发⽣错误时的处理函数
console.log('失败')
});
}
  3.在页⾯需要初始化的地⽅因为该js⽂件即可
# 2018-12-13创建
先安装 sockjs-client 和 stompjs
npm install sockjs-client
npm install stompjs 
import SockJS from'sockjs-client';
import  Stomp from'stompjs';
export default {
data(){
return {
stompClient:'',
timer:'',
}
},
methods:{
initWebSocket() {
let that= this;
// 断开重连机制，尝试发送消息，捕获异常发⽣时重连
this.timer = setInterval(() => {
try {
that.stompClient.send("test");
} catch (err) {
console.log("断线了: " + err);
websocket和socket}
}, 5000);
},
connection() {
// 建⽴连接对象
let socket = new SockJS('10.10.91.4:8081/ws');
// 获取STOMP⼦协议的客户端对象
this.stompClient = Stomp.over(socket);
// 定义客户端的认证信息，按需求配置
let headers = {
Authorization:''
}
/
/ 向服务器发起websocket连接
t(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);
}
}
问题
安装 sockjs-client、stompjs；在这⼉要注意⼀下，我在"stompjs": "^2.3.3"这个版本发现，引⼊stompjs
会报⼀个net模块不到，需要在stompjs模块根⽬录下执⾏npm install net，这个是个奇葩的问题进⼊到module⽬录下的stompjs⽬录，执⾏npm install net

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。