简介
redux-socket-cluster 是一个可以帮助开发者管理 socket.io 向redux store 中 dispatch action 的 npm 包。开发者可以使用它来方便地创建一个基于 socket.io 的实时通讯应用程序。
安装
使用 npm 命令来安装 redux-socket-cluster。
npm install --save redux-socket-cluster
使用
先在 redux 中创建一个 socket cluster 中间件，代码如下：
-- -------------------- ---- ------- ------ ----------------------------- ---- ----------------------- ----- ------ - - --------- ------------ -- ----- ----- ----- -- ----- ------- ----- -- --------------- -- ----- ----------------------- - --------------------------------------
接下来将中间件加入到 redux store 中。
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(socketClusterMiddleware)
);这样就完成了 redux 和 socket.io 的关联。接下来，就可以用 socket.io 向 redux 发送 action 了。
-- -------------------- ---- ------- ------ ------------- ---- ----------------------- ----- ------ - ------------------------------ -- ------ -------------------- -- -- - ---------------- ----- ------------------- -------- - ------ - --- --- -- ----------- -------------------- ------ -- - ---------------- ----- ------------------- -------- ---- --- --- -- -------- -------- -------------------- - --------------------------- - ------- --- -
实例
下面，我们将用一个简单的 chat 应用的例子来演示如何使用 redux-socket-cluster。
后台
我们的 chat 应用会包含一个简单的 ChatRoom 组件和一个聊天信息列表，以及一个 Node.js 后台服务器。
这个服务器要完成以下三个操作：
- 向所有客户端广播一个新的消息。
- 当客户端连接时发出欢迎消息。
- 当客户端断开连接时发出告别消息。
$ npm install express socket.io cors
现在，我们可以开始在一个 Node.js 应用程序（本示例中为 server.js）中编写我们的服务器代码。
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- -------- - ---------------------
----- ---- - ----------------
----- --- - ----------
----------------
----- ------ - -----------------------
----- -- - ---------------- -
----- -
------- ---
-
---
----- ---- - -----
------------------- -------- -- -
------------------- ------------ ------------
-- ------
---------------------- -
-------- ------ ------ ------------- ------- -- --- ------
---
-- -- ------------ --
------------------------- ------ -- -
--------------------- ------- ----------------- ---- ------ ---------------
---------------------------------------- -
-------- ------------
---
---
-- -- ---------- --
----------------------- -- -- -
------------------- ------------ ---------------
---
---
------------------- -- -- -
------------------- --------- -- ---- ----------
---前台
接下来，我们将在 React.js 中编写前端代码。我们主要使用 react-redux 和 redux-socket-cluster。
之后，我们对应用程序使用 react-redux 的 Provider 组件进行包装，并得到应用程序的根元素。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ---------- ---- --------------
------ ------------- ---------------- ---- --------
------ ----------------------------- ---- -----------------------
------ ----------- ---- -------------
----- ------ - -
--------- ------------ -- -----
----- ----- -- -----
--
----- ----------------------- - --------------------------------------
----- ----- - ------------
------------
----------------------------------------
--
----------------
--------- --------------
---- --
------------
-------------------------------
--创建完成根元素后，我们现在可以通过使用 connect 函数将组件绑定到 redux store 中来创建 ChatRoom 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- --------------
----- -------- ------- --------------- -
-----
-
----- --------------- - ------- -- -
------ -
------- -------------------
--
--
------ ------- -----------------------------------这时，我们可以使用 socket 与服务器进行通信并向 redux store 分发 action。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- --------------
------ ------ ---- --------------------
----- ------------- - -----------
--------- ---------
--
----- ------------ - -----------
----------- -----
------- ------
-------- -----
------- --- ----- -----
--
----- -------------- - -----------
--------- ---------
------- -----
----- --
------ --
------ -----
-------- -----
---------------- --------------
--
----- ----- - -------------
------ ----
------- -----
-------- - -----
--
----- ------ - --------------
------ ----
------- -----
---------- -----
------ -----
----------------- --------
------- -----
------- --------
------- -
----------------- --------
-
--
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
-------- --
--
-
------------------- - ------- -- -
--------------- -------- ------------------ ---
--
----------------- - -- -- -
----- - ------ - - -----------
--------------------------- - -------- ------------------ ---
--------------- -------- -- ---
--
-------- -
----- - -------- - - -----------
----- - ------- - - -----------
------ -
---------------
--------------
----------------------- ------ -- -
---- ---------------------------
---
---------------
----------------
------ ----------- --------------- ----------------------------------- --
------- ----------------------------------------------
-----------------
----------------
--
-
-
----- --------------- - ------- -- -
------ -
------- --------------------
--------- -------------------
--
--
------ ------- -----------------------------------最后，我们只需要在根应用程序中引入 ChatRoom 组件，让它渲染到我们的页面中。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------
-------- ----- -
------ -
-----
--------- --
------
--
-
------ ------- ----总结
redux-socket-cluster 是一个非常有用的 NPM 包，它可以大大简化基于socket.io 的应用程序的开发。在本文中，我们学习了如何安装和使用 redux-socket-cluster，以及如何在 chat 应用程序中使用它。我们还深入探讨了如何将 redux 中间件与 socket.io 结合使用。
希望您掌握了这个 NPM 包的使用技巧，并且可以在自己的项目中应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8ba0