WebSocket接收不到发来的信息？

Question

chat.js文件

export default class WebSocketService {
  constructor(url) {  
    this.socket = new WebSocket(url);  
    this.initSocket();  
  }  
  initSocket() {  
    this.socket.onopen = () => {  
      console.log('WebSocket Connected');  
    };  

    this.socket.onmessage = (event) => {  
      const data = JSON.parse(event.data); 
      this.handleMessage(data);  
    };  

    this.socket.onerror = (error) => {  
      console.error('WebSocket Error: ', error);  
    };  

    this.socket.onclose = () => {  
      console.log('WebSocket Disconnected');  
    };  
  }  

  sendMessage(message) {  
    if (this.socket.readyState === WebSocket.OPEN) {  
      this.socket.send(JSON.stringify(message));  
    } else {  
      console.error('WebSocket is not open. Unable to send message.');  
    }  
  }  

  handleMessage(data) {  

  }  
}

在main.js文件

import WebSocketService from '@/utils/chat';
import { baseURL } from '@/config'
const userId = 'PC_' + localStorage.getItem("userId")
  const _token = localStorage.getItem("admin-pro-token")
  let str = baseURL;
  let newStr
  if (process.env.NODE_ENV === 'development') {
    newStr = str.replace("http", "ws");
  } else {
    newStr = str.replace("https", "wss");
  }

const socketService = new WebSocketService(`${newStr}applet/user/chat/${userId}?token=Bearer%20` + _token);
Vue.prototype.$socket = socketService; 

在组件使用WebSocket

import { getUnreadNumberAll } from '@/api/chat'
methods: {
    async fetchData() {
      console.log(this.$socket.constructor);
      const data = await getUnreadNumberAll();
      this.badgeNumber = data.data
    },
}
created() {
  this.fetchData()
},

大佬们，在接收信息接收不到，这是什么原因呢，我的需求是在接收信息同时触发这个this.fetchData()方法，但是这样写接收不到

在接收信息接收不到，这是什么原因呢，我的需求是在接收信息同时触发这个this.fetchData()方法，但是这样写接收不到，怎么处理呢

Answer 1

在这种情况下，接收不到WebSocket信息的原因可能有很多，下面是一些可能的原因及解决办法：

可能原因及解决办法
WebSocket连接没有正确建立：

请确保WebSocket URL正确无误，尤其是协议（ws或wss）和路径。
确认后端WebSocket服务器已正确启动并监听指定的路径。
消息格式或解析错误：

请确认后端发送的消息格式正确，并且前端解析消息时没有错误。
可以在this.socket.onmessage中添加更多的日志以调试：

this.socket.onmessage = (event) => {
  console.log('Message received: ', event.data);
  try {
    const data = JSON.parse(event.data);
    this.handleMessage(data);
  } catch (error) {
    console.error('Error parsing message: ', error);
  }
};

WebSocket服务实例在Vue组件中未正确注册或使用：

确保在组件中正确地使用this.$socket，并且在适当的生命周期钩子中进行处理。

handleMessage(data) {
  // 确保this指向组件实例
  Vue.prototype.$socket.componentInstance.fetchData();
}

检查连接状态：

可以在this.socket.onopen和this.socket.onclose中添加更多日志，确保连接状态正常：

this.socket.onopen = () => {
  console.log('WebSocket Connected');
};

this.socket.onclose = () => {
  console.log('WebSocket Disconnected');
};

代码调整示例
WebSocketService类
在handleMessage中触发组件的fetchData()方法。确保传入Vue实例以便在WebSocket中调用其方法。

export default class WebSocketService {
  constructor(url, componentInstance) {
    this.socket = new WebSocket(url);
    this.componentInstance = componentInstance;
    this.initSocket();
  }

  initSocket() {
    this.socket.onopen = () => {
      console.log('WebSocket Connected');
    };

    this.socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.handleMessage(data);
    };

    this.socket.onerror = (error) => {
      console.error('WebSocket Error: ', error);
    };

    this.socket.onclose = () => {
      console.log('WebSocket Disconnected');
    };
  }

  sendMessage(message) {
    if (this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(JSON.stringify(message));
    } else {
      console.error('WebSocket is not open. Unable to send message.');
    }
  }

  handleMessage(data) {
    if (this.componentInstance) {
      this.componentInstance.fetchData();
    }
  }
}

在main.js中实例化WebSocketService并传入Vue实例

import WebSocketService from '@/utils/chat';
import { baseURL } from '@/config';
import Vue from 'vue';

const userId = 'PC_' + localStorage.getItem("userId");
const _token = localStorage.getItem("admin-pro-token");
let str = baseURL;
let newStr = process.env.NODE_ENV === 'development' ? str.replace("http", "ws") : str.replace("https", "wss");

Vue.prototype.$socket = new WebSocketService(`${newStr}applet/user/chat/${userId}?token=Bearer%20${_token}`, Vue);

在Vue组件中使用WebSocket
确保fetchData方法在WebSocketService的handleMessage中被调用：

import { getUnreadNumberAll } from '@/api/chat';

export default {
  methods: {
    async fetchData() {
      console.log('Fetching data...');
      const data = await getUnreadNumberAll();
      this.badgeNumber = data.data;
    },
  },
  created() {
    this.fetchData();
  },
};

调试步骤
确保WebSocket URL正确无误。
确认WebSocket连接已成功建立。
确认后端发送的消息格式正确，前端能够正确解析。
确保在Vue组件中正确注册并使用WebSocketService实例。
通过上述步骤，您应该能够解决WebSocket接收信息的问题，并在接收到信息时触发fetchData方法。