VUE调用Websocket对象报错
页面会有多个组件调用connectWs()，求分析报错的原因，有还需要了解可以留言，非常感谢。
Chrome报错：
火狐报错：
以下是public.js封装的方法
Vue.prototype.connectWs = function (subscribeArr) {
if (typeof (WebSocket) == undefined) return
if (ws == null || ws.readyState != 1) {
let profitOld = "--", rateProfitOld = "--";
ws = new WebSocket(store.state.wsUrl)
store.state.ws = ws;
ws.onopen = (ddd) => {
ws.send(wsLoginBag(this.$md5, subscribeArr));
wsInterval = setInterval(() => {
ws.send(JSON.stringify({command: 3}))
}, 6000)
}
if (localStorage.newPriceKey) {
newPrice = JSON.parse(localStorage.newPriceKey)
}
ws.onmessage = (e) => {
let data = JSON.parse(e.data);
let body = data.body
if (data.command == 11) {
ws.send(wsChangeDestine(subscribeArr));
return
}
if (data.command == 12) {
if (body && body.length > 0) {
body.forEach(item => {
//...
if (isNaN(parseFloat(profitOld))) {
profitOld = "--"
}
if (isNaN(parseFloat(rateProfitOld))) {
rateProfitOld = "--"
}
newPrice[item.symbol] = {
//...
}
this.resetSetItem("newPriceKey", JSON.stringify(newPrice))
})
}
}
if (data.command == 14) {
if (body.code == 0) return false;
let sd = newPrice[body.symbol];
if (!sd) return;
if (sd.yesterdayClose != 0) {
//...
if (isNaN(parseFloat(profitOld))) {
profitOld = "--"
}
if (isNaN(parseFloat(rateProfitOld))) {
rateProfitOld = "--"
}
}
//...
this.resetSetItem("newPriceKey", JSON.stringify(newPrice))
}
}
ws.onerror = (err) => {
clearInterval(this.wsInterval)
}
ws.onclose = (err) => {
clearInterval(this.wsInterval)
}
} else if(ws != null && ws.readyState == 1) {
ws.send(wsChangeDestine(subscribeArr));
}
}
你需要监听WebSocket是否处于关闭状态的判断吧
var socket = new WebSocket("localhost:8080/websocket");
if(socket.readyState != socket.OPEN){
alert("连接已中断!")
//todo...
return false;
另外，你的服务端是否收到客户端的心跳？
连接加个定时器：
var interval_timer = null;//计时器
var timer_count = 0;
var ws = new WebSocket("wss://eee.com/ssssmn");
ws.onmessage = function (e) {
var message = eval('(' + e.data + ')');
switch (message.type) {
case 'init':
changeNoReadLogs();
var bind = '{"type":"bind","from_id":"' + from_id + '","to_id":"' + to_id + '"}';
ws.send(bind);
message_load();
break;
....... 具体代码省略......
}
};
ws.onclose = function (e) {
console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
};
// 开启定时器
init_start_timer();
/**
* 设置一个 30秒的轮询监听方法，避免页面关闭
*/
function init_start_timer() {
//重置计数器
timer_count = 0;
if(interval_timer != null){
clearInterval(interval_timer);
interval_timer = null;
}
interval_timer = setInterval(function(){ myTimer() }, 30000);
}
/**
*定时器具体实现方法
*/
function myTimer() {
//TODO 如果超过半小时没有交互，则关闭计时器
if(timer_count >= 1800){
clearInterval(interval_timer);
}else {
timer_count += 30;
var online = '{"type":"timer","from_id":"' + from_id + '","to_id":"' + to_id + '"}';
ws.send(online);
console.log('timer_count',timer_count);
}
}
然后，注意在发送消息时，比如点击发送键时首先判断用户是否在线,如果还是在线状态就再次调用 "init_start_timer()" 从而初始化定时计数
/**
* 判断当前用户是否 还在线
*/
function isOnlineCurrUser() {
if(ws.readyState == WebSocket.OPEN){
console.log('open',ws.readyState);
init_start_timer();
return true;
}else {
console.log('close',ws.readyState);
return false;
}
}
补充： 有一种可能你的端口是不是被占用了，另外有可能是WebSocket传递的数据长度大于8192引起的 WebSocket建立连接后传递的JSON长度要<=8192才可以，否则就会报错 WebSocket is already in CLOSING or CLOSED state.异常然后一直在重复连接又断开。
只要在函数中添加对状态的判断，在状态为OPEN时，执行send方法即可。方法一代码如下
vm.init()
if (vm.socket.readyState===1) {
vm.send()
}
ws只需要链接一次，之后通过订阅去订阅数据
看报错：
- 连接关闭了，可能后台挂了，没有服务
- 防火墙之类的，网没通
- store.state.wsUrl，wss 链接方便暴露下吗？如果是本地的话，我可以给你个简单 demo
- 同一个websocketUrl 只要有一个建立就行了，保留引用就可以用
上面的提示告诉你，websocket目前已停止。客户段一直处于连接中的状态。
所以要么你的连接参数有问题，要么问题出在服务端
从这两个地方出发来找问题，
希望可以帮到你
closing or closed state，意思是websocket的连接已中断，可以采取如下方式解决该问题：
心跳：客户端每隔1分钟自动发送ping消息给服务端，服务端需要返回pong。
这里详细介绍Vue中调用Websocket ，代码拿走直接用 https://blog.csdn.net/AisinGioroGouzi/article/details/125987740