Web 套接字与 Socket.io

安装 socket.io-client

npm i socket.io-client --save

导入模块

import SocketIOClient from 'socket.io-client/dist/socket.io.js'

在构造函数中初始化

constructor(props){
    super(props);
    this.socket = SocketIOClient('http://server:3000');
  }

现在为了正确使用套接字连接，你也应该在构造函数中绑定你的函数。假设我们必须构建一个简单的应用程序，它将在每 5 秒后通过套接字向服务器发送一个 ping（将其视为 ping），然后应用程序将从服务器获得回复。为此，我们首先创建这两个函数：

_sendPing(){
    //emit a dong message to socket server
    socket.emit('ding');
}

_getReply(data){
    //get reply from socket server, log it to console
    console.log('Reply from server:' + data);
}

现在，我们需要在构造函数中绑定这两个函数：

constructor(props){
    super(props);
    this.socket = SocketIOClient('http://server:3000');

    //bind the functions
    this._sendPing = this._sendPing.bind(this);
    this._getReply = this._getReply.bind(this);
}

之后，我们还需要将_getReply 函数与套接字链接，以便从套接字服务器接收消息。为此，我们需要使用 socket 对象附加_getReply 函数。将以下行添加到构造函数中：

this.socket.on('dong', this._getReply);

现在，每当套接字服务器发出’dong’时，你的应用程序就能够接收它。