使用React，Redux和Websocket處理請求

Question

我正在開發一個使用ReactJS，Redux和Websockets的應用程序。在這個應用程序中，我正在實現實時渲染功能（用戶將在屏幕上收到通知而不刷新頁面）。

比方說，我有2個組件需要渲染。

• 通知
• 聊天

我與訪問2個獨立的終點獲得這些2個組件的數據想開2個獨立的插座。

通知組件

componentDidMount() { 
    io("sample.data/endpoint/notification").on("data", data => this.setState({notificationData: data})); 
} 

聊天組件

componentDidMount() { 
    io("sample.data/endpoint/chat").on("data", data => this.setState({chatData: data})); 
} 

代替使用2個獨立的插座，有一種方法，我可以使用1個插座兩者都做這些功能？換句話說，有一個端點可以檢索通知和聊天數據，並且在得到那些數據之後，是否有一種方法可以過濾然後將這些單獨的數據輸入到2個組件中？

換句話說，有沒有辦法讓一個集中的類來處理 所有WebSocket的請求，並喂以不同 成分的反應如何？

讓我知道你對此的意見和建議我的方式來處理這個。

Answer 1

除非我錯過了一些東西，你想要做的是正確的。管理一個套接字並對消息進行分類，然後根據收到的消息發送不同的動作。

這裏有一個實施爲例：

//Open a connection 
static startWebsocketConnection() { 
    return new Promise((resolve, reject) => { 
     try { 
     let W3CWebSocket = require('websocket').w3cwebsocket; 
     let client = new W3CWebSocket('ws://localhost:8081/'); 
     return resolve(client) 
     } catch (error) { 
     return reject(error) 
     } 
    }) 
} 

//Dispatch an action depending on the message received 
export function openChatWebSocket(chatid) { 
    return dispatch => { 
    return startWebsocketConnection() 
     .then(client => { 
     client.onerror = function() { console.log('Connection Error'); }; 

     client.onopen = function() { console.log('WebSocket Client Connected'); }; 

     client.onclose = function() { console.log('echo-protocol Client Closed'); }; 

     client.onmessage = function (e) { 
      if (typeof e.data === 'string') { 
      let message = JSON.parse(e.data) 
      switch (message.event) { 
       case 'new-message': 
       dispatch(newMessageNotification(message)) 
       break; 

       case 'new-participant': 
       dispatch(anotherAction(message)) 
       break; 

       case 'remove-participant': 
       dispatch(anotherAction2(message.data.chatid, message.data.participant)) 
       break; 

       default: 
       break; 
      } 
      } 
     }; 
     }) 
     .catch(error => dispatch(errorOpeningWebsocket(error.message))) 
    } 
} 

//One action as an example 
export const newMessageNotification = (message) => { 
    return { 
    type: 'NEW_MESSAGE_NOTIFICATION', 
    message 
    } 
} 

發送或接收消息時，有兩個重要的事情：事件和數據。

事件通常爲代表事件的字符串，並數據通常是含有一個JSON對象無論通過套接字發送（語義必須由課程的[企業給出）。

對於使用[Node + Express + Socket.io]的服務器示例，您可以查看整個示例here和here。

您可以看到工作示例here。

讓我知道如果你需要澄清這個例子，它是非常基本但很簡單。