前言
在现代Web开发中，对于前端而言，很多时候都需要与服务器进行双向通讯。例如，实时聊天、网络游戏以及当前最流行的实时Web应用都需要这种双向通讯方式。
Redux是一种JavaScript状态管理工具，被广泛的应用于React开发中。它可以帮助我们管理React中的组件状态。redux-websockets则是一个Redux中间件，它可以方便的将WebSocket和Redux集成在一起，实现快速、稳定的双向通讯。
本文将介绍如何使用redux-websockets npm包，以及如何将它应用到您的React项目中。
准备工作
安装npm包
在您的React项目中，可以使用以下命令安装redux-websockets npm包：
npm install --save redux-websockets
引入WebSocket
在使用redux-websockets之前，需要先引入WebSocket。在React项目中，可以使用如下代码引入WebSocket：
const socket = new WebSocket('ws://localhost:3000');这里以本地服务器端口3000上的WebSocket为例。当然，您可以使用其他端口或URL，只需要更改ws://localhost:3000即可。
使用redux-websockets
创建redux中间件
使用redux-websockets需要创建中间件。创建过程如下所示：
import { createStore, applyMiddleware } from 'redux';
import { createWebsocketMiddleware } from 'redux-websockets';
import reducer from './reducer';
const socket = new WebSocket('ws://localhost:3000');
const middleware = createWebsocketMiddleware(socket);
const store = createStore(reducer, applyMiddleware(middleware));在上面的代码中，先通过createWebsocketMiddleware 函数创建WebSocket中间件，然后使用applyMiddleware函数将中间件应用到Redux中。
配置redux-websockets
您可以通过创建配置对象来配置redux-websockets以满足您的需求。例如，您可以使用prefix属性修改消息类型的前缀。示例代码如下：
const socket = new WebSocket('ws://localhost:3000');
const middleware = createWebsocketMiddleware(socket, {
prefix: 'my-app/'
});发送消息
使用redux-websockets发送消息非常简单。只需要在Redux中dispatch一个带有type属性的普通JavaScript对象即可。例如：
store.dispatch({
type: 'SEND_MESSAGE',
payload: {
message: 'Hello, World!'
}
});上述代码中，我们向服务器发送了一条消息。根据服务器的具体实现，您需要在服务器端进行一些处理才能将这条消息正确发送出去。
接收消息
使用redux-websockets接收消息同样非常简单。只需要在Redux中添加一个与type属性匹配的reducer即可。例如：
-- -------------------- ---- -------
-------- ------------- - --- ------- -
-- ------------ --- ------------------ -
------ -
---------
--------- -
------------------
--------------
-
--
-
------ ------
-在上述代码中，我们根据type属性匹配最新的消息，然后将消息存储到应用状态中，以供后续处理。
示例代码
下面是一个简单的聊天应用示例代码。代码中包含注释，很容易理解。您可以在本地部署一个WebSocket服务器，然后在两个浏览器窗口分别打开该应用，进行测试。例如，您可以使用Node.js编写以下服务器代码：
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -------------- -
---------------- -------- ----------------- -
---------------------- ---- ---------
---------------------------- ------------ -
-- ------------------ --- --------------- -
---------------------
-
---
---
---
---------------------- ------ ------- -- ----------------------客户端代码如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------ --------------- - ---- --------
------ - ------------------------- - ---- -------------------
-------- ------------- - - --------- -- -- ------- -
-- ------------ --- ------------------ -
------ -
---------
--------- -
------------------
--------------
-
--
-
------ ------
-
----- ------ - --- ---------------------------------
----- ---------- - ----------------------------------
----- ----- - -------------------- -----------------------------
-------- ----- -
----- --------- ----------- - -------------
-------- ------------------- -
----- ------- - - ------- --
---------------- ----- --------------- ------- ---
---------------
-
------------------ -- -
----- - -------- - - -----------------
----------------------
---
----- ---------- ------------ - -------------
------ -
-----
----
----------------------- ------ -- --- ----------------------------
-----
------ ----------- --------------- --------------- -- ----------------------------------------
------- -----------------------------------------
------
--
-
------ ------- ----结论
本文介绍了如何使用redux-websockets npm包，并提供了一个简单的聊天应用程序示例。在实践中，您可能需要按照实际需求对示例代码进行修改。不过，通过使用redux-websockets，可以让您的应用程序快速实现WebSocket双向通讯，为实时Web应用程序提供强大的支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cc3