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’時，你的應用程式就能夠接收它。