如何在Ionic 3与Angular 4中实现Websocket正常运行？

先帮你梳理下遇到的几个核心问题，然后逐个给出解决思路：

一、socket.io-client 中 this.socket 为 undefined 的问题 #

这种情况大概率是上下文绑定或初始化时机不对导致的，给你两种常见场景的正确写法：

• 如果是类组件：要确保在constructor里正确初始化并赋值给this.socket，别在初始化前就尝试访问它

// 类组件示例
constructor(props) {
  super(props);
  // 正确初始化socket实例并绑定到this
  this.socket = io('ws://192.168.0.10:8000');
  // 顺便绑定连接事件验证
  this.socket.on('connect', () => {
    console.log('客户端已成功连接socket.io服务器');
  });
}

• 如果是函数组件：别用this，直接用useRef来保存socket实例，避免组件重渲染时丢失引用

// 函数组件示例
import { useRef, useEffect } from 'react';
import io from 'socket.io-client';

function SocketComponent() {
  const socketRef = useRef(null);
  
  useEffect(() => {
    // 初始化socket并存入ref
    socketRef.current = io('ws://192.168.0.10:8000');
    
    // 组件卸载时主动断开连接
    return () => {
      socketRef.current?.disconnect();
    };
  }, []);
  
  // 后续通过socketRef.current访问socket实例
  return <div>WebSocket连接测试</div>;
}

二、服务器显示已连接但断开事件未触发的问题 #

这说明客户端和服务器的双向通信链路没有完全建立，或者断开事件的监听逻辑有问题：

1. 先检查服务器端的断开事件监听是否正确：
   • 如果是socket.io服务器，要监听socket实例的disconnect事件：

     // socket.io服务器端示例
     io.on('connection', (socket) => {
       console.log('用户已连接');
       // 确保这个断开事件监听存在
       socket.on('disconnect', () => {
         console.log('用户已断开连接');
       });
     });
     

   • 如果是原生WebSocket服务器，要监听ws实例的close事件：

     // 原生WebSocket服务器端示例
     const WebSocket = require('ws');
     const wss = new WebSocket.Server({ port: 8000 });
     
     wss.on('connection', (ws) => {
       console.log('用户已连接');
       ws.on('close', () => {
         console.log('用户已断开连接');
       });
     });
     

2. 测试时别直接关浏览器标签页（断开事件可能有延迟），手动调用断开方法验证：
   • socket.io客户端：this.socket?.disconnect();
   • 原生WebSocket客户端：ws?.close();

三、原生WebSocket连接报错的问题 #

你用的连接URL是ws://192.168.0.10:8000/node/test.js，这明显是路径错误：

• 如果服务器是socket.io服务，它的WebSocket默认路径是/socket.io/，原生WebSocket要这么连：

  const ws = new WebSocket('ws://192.168.0.10:8000/socket.io/?EIO=4&transport=websocket');
  

• 如果是自定义原生WebSocket服务器，要确保客户端连接的路径和服务器监听的路径一致，别直接指向某个JS文件，而是WebSocket服务的根路径或自定义路径。

内容的提问来源于stack exchange，提问作者crrrrkk