vu2+webSocket实现聊天室

由于布局和样式太简单,这里就不重复了.

export default {
  name: 'HelloWorld',
  data() {
    return {
      scoket: null,
      accountList: [],
      message: null,
      // 聊天室ID
      chatRoomId: null,
      // 聊天记录
      chatList: []
    };
  },
  mounted() {
    // 创建 WebSocket 连接
    let _scoket = new WebSocket('ws://192.168.1.55:8100');
    this.scoket = _scoket;

    // 心跳间隔（比如6秒）
    const heartbeatInterval = 5 * 1000;

    let heartbeatIntervalId;

    // 使用箭头函数，确保 `this` 始终指向 Vue 实例
    _scoket.onopen = () => {
      this.open();
      // 在这里 `this` 已经指向 Vue 实例
      startHeartbeat();
    };

    // WebSocket 消息处理
    _scoket.onmessage = (event) => {
      this.handleMessage(event);
    };

    // WebSocket 错误处理
    _scoket.onerror = (error) => {
      console.error('WebSocket 错误:', error);
    };

    // WebSocket 关闭处理
    _scoket.onclose = () => {
      console.log('WebSocket 连接已关闭');
      // 清除心跳定时器
      clearInterval(heartbeatIntervalId);
    };

    // 启动心跳机制
    const startHeartbeat = () => {
      // 定时发送ping消息
      heartbeatIntervalId = setInterval(() => {
        this.open();
        // 重置心跳超时
      }, heartbeatInterval);
    };
  },

  methods: {
    MyEncrypt, MyDecrypt,
    //收到消息
    handleMessage(event) {
      let data = MyDecrypt(event.data)
      const receivedData = JSON.parse(data);
      if (receivedData.msgId === 1000400) {
        this.accountList = receivedData.data.msgList;
      }
      if (receivedData.msgId === 1000404) {
        this.chatList = receivedData.data.chatList.reverse()
      }
      if (receivedData.msgId === 1000407) {
        this.getNewChatMessage(receivedData)
      }

    },
    // 建立连接
    open() {
      console.log('链接已成功建立');
      let data = {
        msgId: 100,
        data: ''
      };
      this.sendMessage(data);  // 发送数据
    },
    // 收到新消息
    getNewChatMessage(message) {
      console.log(message);
      if (this.chatRoomId == message.data.chatRoomId) {
        this.chatList.push(message.data.msgData)
      }
    },
    // 发送消息
    sendMessage(data) {
      if (this.scoket && this.scoket.readyState === WebSocket.OPEN) {
        let mydec = MyEncrypt(JSON.stringify(data))
        this.scoket.send(mydec);
      } else {
        console.log('WebSocket 尚未连接或已关闭');
      }
    },
    // 登录
    login() {
      let data = {
        msgId: 1000001,
        data: {
          account: 'player12',
          password: '123456'
        }
      };
      this.sendMessage(data);  // 登录数据发送
    },
    // 获取聊天室累表
    getAccount() {
      let data = {
        msgId: 1000400,
        data: {
          pageNum: 1,
          pageSize: 15,
        }
      }
      this.sendMessage(data);
    },
    // 选中玩家
    selectPlayer(item) {
      this.chatRoomId = item.chatRoomId
      this.getHistoryList(item.chatRoomId)
    },
    // 获取聊天记录
    getHistoryList(chatRoomId) {
      let data = {
        msgId: 1000404,
        data: {
          pageNum: 1,
          pageSize: 10,
          chatRoomId
        }
      }
      this.sendMessage(data)
    },
    // 发送消息
    sen() {
      let data = {
        msgId: 1000402,
        data: {
          chatRoomId: this.chatRoomId,
          content: this.message
        }
      }
      this.sendMessage(data)
      this.getHistoryList(this.chatRoomId)
      this.message = null
    }
  }
};
</script>