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