建立webSocket链接

73 阅读1分钟

建立webSocket链接

1、webSocket是客户端跟服务器建立的长连接,可以双向通信、双向数据传输,允许服务器端对客户端主动推送数据,是建立在TCP协议之上的

 wsRef.current = new WebSocket(
      `wss://duo.sg.cn/duoduo-service/websocket/webSocket/${qrCodeId}`,
    );
    // 获取连接状态
    console.log('ws连接状态:' + wsRef.current.readyState);
    //监听是否连接成功
    wsRef.current.onopen = function () {
      console.log('ws连接状态:onopen' + wsRef.current.readyState);
      //连接成功则发送一个数据  wsRef.current.send('test1');
    };
    // 接听服务器发回的信息并处理展示
    wsRef.current.onmessage = function (data) {
      console.log('接收到来自服务器的消息:', data.data);
      if (data?.data?.indexOf('token') > -1) {
        var info = JSON.parse(data.data);
        console.log('登录成功:', info);
        var tokenUser = info.tokenUser;
        var token = info.token;
        var refreshToken = info.token;
        localStorage.setItem('user', JSON.stringify(tokenUser));
        localStorage.setItem('token', token);
        history.push('/home');
        //完成通信后关闭WebSocket连接 
        wsRef.current.close();
      }
      
    };
    // 监听连接关闭事件
    wsRef.current.onclose = function (e) {
      // 监听整个过程中websocket的状态
      console.log('ws连接状态:onclose' + wsRef.current.readyState);
      console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
    };
    // 监听并处理error事件
    wsRef.current.onerror = function (error) {
      console.log('ws连接状态:error', error);
    };

zhuanlan.zhihu.com/p/619866292 参考链接