前言
在 Web 应用中，前端与后端的数据传输是必不可少的一环。传统的做法是前后端通过 HTTP 协议交换数据，但这种方式存在许多问题，比如数据传输效率低，服务器长连接困难等等。为了解决这些问题，WebSocket 出现了，它可以建立服务器和客户端之间全双工（双向通信）的通信管道。redux-socket.io 就是一个将 WebSocket 与 Redux 相结合的 npm 包，它使得数据的传输变得更加便捷和高效。
安装
首先在你的应用中安装 redux-socket.io：
npm install --save redux-socket.io
配置
redux-socket.io 使用 socket.io-client 来与服务器进行 WebSocket 通信，所以在配置前需要先安装 socket.io-client：
npm install --save socket.io-client
接着在你的应用中按照下面的方式引入 redux-socket.io：
-- -------------------- ---- ------- -- ------ ------ -- ---- ------------------ ------ ------------- ---- ----------------- -- -- --------- -- ----- ------ - --------------------------- -- -- --------------- --- ----- ----------------------- - --------------------- -- -- ----- ----- ----- - ------------ ------------ ---------------------------------------- -展开代码
在这里，我们首先引入 socket.io-client，创建一个 socket 实例。然后将 socket 实例传给 redux-socket.io 中间件，得到一个中间件 reduxSocketIoMiddleware，该中间件会在每次发送 action 时将数据通过 WebSocket 发送给服务端。最后，我们使用 applyMiddleware 将 reduxSocketIoMiddleware 添加到 Redux 应用程序的 middleware 链中。
使用
有了 redux-socket.io，我们就可以像普通的 Redux 应用一样来发送和处理 action。不同的是，redux-socket.io 添加了一些额外的 action 类型。下面是这些额外的 action 类型。
SOCKET_SEND
该 action 类型用于发送数据到 WebSocket 服务端。它包含下面的参数：
type:[String]，必须，表示要发送的 action 的类型。data:[Object]，必须，要发送的数据。
发送一个 SOCKET_SEND 的 action 可以通过下面的方式：
-- -------------------- ---- ------- ----- ------ - - ----- --------------- ----- - ----- ------ -------- ----- ------- --- ------- - - ---------------- ----- -------------- --------- --展开代码
SOCKET_EMIT
该 action 类型也用于发送数据到 WebSocket 服务端。它与 SOCKET_SEND 的区别在于它多了一个 event 参数。像这样：
-- -------------------- ---- ------- ---------------- ----- -------------- ------ ---------- ----- - ----- ------ -------- ----- ------- --- ------- - --展开代码
SOCKET_ON
该 action 类型用于监听 WebSocket 服务端的事件。它包含下面的参数：
event:[String]，必须，要监听的事件名。fn:[Function]，必须，事件触发后的回调函数。
使用例子：
store.dispatch({ type: 'SOCKET_ON', event: 'message', fn: (message) => { console.log('Receive message:', message) } })
SOCKET_OFF
该 action 类型用于取消监听某个事件。它包含下面的参数：
event:[String]，必须，被取消监听的事件名。fn:[Function]，可选，被取消监听的回调函数。
如果没有指定 fn 参数，那么所有的监听该事件的回调函数都将被取消：
store.dispatch({ type: 'SOCKET_OFF', event: 'message', fn: (message) => { console.log('Receive message:', message) } })
示例
下面是一个完整的使用示例，以聊天室为例：
-- -------------------- ---- ------- -- ------ ------ -- ---- ------------------ ------ ------------- ---- ----------------- -- -- --------- -- ----- ------ - --------------------------- -- -- --------------- --- ----- ----------------------- - --------------------- -- -- ----- ----- ----- ----- - ------------ ------------ ---------------------------------------- - -- -- --------- -------- ---------------- ----- ------------ ------ ---------- --- --------- -- - ---------------- ----- ------------------ ----- ------- -- - -- -- ---- ----- ------ - - ----- --------------- ----- - ----- ------ -------- ----- ------- --- ------- - - ---------------- ----- -------------- ------ ---------- --------- --展开代码
在上面的代码中，我们首先创建了一个 WebSocket 实例，然后创建了 redux-socket.io 中间件，并将其添加到 Redux 应用程序的 middleware 链中。接下来，我们监听 WebSocket 服务端发来的 message 事件，当事件触发时将 message 数据发送到 Redux store 中。最后，我们发送一个消息到 WebSocket 服务端，该消息的类型为 SEND_MESSAGE，数据为 { text: 'Hello World!', from: 'John', to: 'Sarah' }。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/redux-socket-io
