vue使用websocket?

Question

代码

<template>
  <div>
    <el-button @click="connectToWebSocket">点击发送</el-button>
  </div>
</template>  

<script>
import { baseURL } from '@/config'
import request from '@/utils/request'
export default {
  data() {
    return {
      // wsUrl: 'ws://192.168.1.109:8900/applet/user/chat/176', // ws地址
      // socket: null, // ws实例
      socket: null,
      // authorizationToken: 'your-authorization-token', // 假设你已经有了授权令牌
      form: {}
    };
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close();
    }
  },
  mounted() {
    this.refreshToken()
  },
  methods: {
    refreshToken() {
      const that = this
      request({
        url: `${baseURL}captcha`,
        method: 'get',
      }).then(function (result) {
        if (result.success) {
          that.form.csrfToken = result.data.csrfToken
        }
      })
    },



    connectToWebSocket() {
      this.socket = new WebSocket('ws://192.168.1.109:8900/applet/user/chat/176');

      this.socket.onopen = () => {
        // 连接打开后，发送包含授权信息的消息给服务器  
        const authMessage = {
          authorizationToken: this.form.csrfToken
        };
        this.socket.send(JSON.stringify(authMessage));
      };

      this.socket.onmessage = (event) => {
        console.log('Received:', event.data);
      };

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

      this.socket.onclose = () => {
        console.log('WebSocket is closed now.');
      };
    }
  }
};  
</script>

ws://192.168.1.109:8900/applet/user/chat/176是后端接口，这个接口要带上token的值，token的值放在authorization，176是userId，目前是写死，用上面的代码 在控制台里报VM10734 ceshi.vue:40 WebSocket connection to 'ws://192.168.1.109:8900/applet/user/chat/176' failed: Error during WebSocket handshake: Unexpected response code: 200，尝试过几种写法都没有效果

想要的效果是WebSocket 跟 上面的接口 实时通讯，大佬们遇到这样的情况要怎么解决

Answer 1

参考这个

const socket = new WebSocket('wss://example.com/socket');

socket.addEventListener('open', (event) => {
  // 在握手阶段添加Authorization头
  socket.send('Authorization: Bearer ' + YOUR_TOKEN);
});

socket.addEventListener('message', (event) => {
  // 处理接收到的消息
  console.log('Received:', event.data);
});

Answer 2

websocket正常连接应该是返回101状态码而不是200

用这个网站看看websocket地址是否能正常连接
https://wstool.js.org/