Vue实现WebSocket通信以及webSocket通信的ws代理配置
Vue实现WebSocket通信以及webSocket通信ws代理配置问题描述:最近项目业务上需要使用WebSocket来进行通信,这里简单记录一下实现的方法。1、进行ws代理配置webSocket的代理配置区别于普通的http代理配置,配置如下:在vue.config.js文件中proxy代理配置:proxy: {'/parkingServer': {//普通的http代理target: 'ht
·
Vue实现WebSocket通信以及webSocket通信ws代理配置
问题描述:最近项目业务上需要使用WebSocket来进行通信,这里简单记录一下实现的方法。
1、进行ws代理配置
webSocket的代理配置区别于普通的http代理配置,配置如下:在vue.config.js文件中proxy代理配置:
proxy: {
'/parkingServer': {
//普通的http代理
target: 'http://你的服务器地址/parkingServer', // 内网(目前在用)如10.2.40.119:10014
/*target: 'http://你的服务器地址/parkingServer', // 外网(目前在用)*/
/*target: 'http://你的服务器地址/parkingServer',//蒋涛本地 网线*/
changeOrigin: true,
pathRewrite: {
'^/parkingServer': '/'
}
},
'/socket': {
//webSocket代理
target: 'ws://你的服务器地址/parkingServer', // 内网
/*target: 'ws://你的服务器地址/parkingServer', // 外网*/
/*target: 'ws://你的服务器地址/parkingServer',//本地测试*/
ws:true,//开启ws, 如果是http代理此处可以不用设置
changeOrigin: true,
pathRewrite: {
'^/socket': '/'
}
}
}
2、使用xuex的全局通信变量进行watch监听:
stores下的index.js定义通信变量:
const stores = new Vuex.Store({
state:{
globalUserId:'',//登录后存储用户id 建立webSocket连接
globalMessageTipInfo:[],//存放通过webSocket推送过来的消息
webSocketTotal:'',//webSocket推送的数据条数
},
modules: {
app,
user,
permission
},
getters
})
组件内进行watch监听:
watch:{
"$store.state.globalUserId":function (val,old) {
console.log(val);
},
"$store.state.globalMessageTipInfo":function (val,old) {
console.log(val);
},
},
3、组件内建立webSocket通信,如在用户登录时即建立webSocket连接:
//存储用户id 建立webSocket连接
this.$store.state.globalUserId = res.info.id;
/*webSocket开始连接*/
var socket;
var globalMessageTip=[];//接收webSocket推送过来的数据
if (typeof WebSocket == "undefined") {
console.log("您的浏览器不支持WebSocket");
}
else {
console.log("您的浏览器支持WebSocket");
//实现化WebSocket对象,指定要连接的服务器地址与端口 建立连接
var socketUrl = "ws:"+location.host+ "/socket/webSocket/reporting/"+ this.$store.state.globalUserId;
/*var socketUrl = "ws:"+location.host+ "/socket/webSocket/reporting/"+ this.$store.state.globalUserId;*/
socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
console.log(socketUrl);
if (socket != null) {
socket.close();
socket = null;
}
socket = new WebSocket(socketUrl);
//打开事件
socket.onopen = function() {
console.log("websocket已打开");
//socket.send("这是来自客户端的消息" + location.href + new Date());
socket.send(res.info.id)
};
//获得消息事件
socket.onmessage = function(msg) {
console.log(msg.data,'服务器通过webSocket推送的消息');
//发现消息进入 开始处理前端触发逻辑
//中间过渡函数接收webSocket数据
func1(msg.data);
};
//中间过渡函数处理webSocket数据
let func2 = function func3(val) {
//在此处即可同时使用websocket的数据和data数据,method函数
this.$store.state.globalMessageTipInfo = val;
this.$store.state.webSocketTotal = (JSON.parse(this.$store.state.globalMessageTipInfo)).total;
}
let func1 = func2.bind(this);
//关闭事件
socket.onclose = function() {
console.log("websocket已关闭");
};
//发生了错误事件
socket.onerror = function() {
console.log("websocket发生了错误");
};
/*webSocket开始连接*/
}
4、webSocket连接成功:
更多推荐
已为社区贡献3条内容
所有评论(0)