Socket.io 是一个真正的实时 Web 应用程序框架。它通过 JavaScript 和 Node.js, 让我们可以使用 WebSocket 确立客户端与服务器的实时通信。今天我们将会学习如何使用 Socket.io 来实现一个简单的即时投票系统。
投票系统概述
我们将设计一个实时投票系统，这个系统可以让用户在网页上投票，并实时地将投票结果反映出来。我们还将使用 Node.js 和 Express.js 作为服务器端的框架。在此之前，先确保你已经完成了以下步骤：
- 安装 Node.js
- 安装 Express.js
- 安装 Socket.io
服务器端
暂时不考虑数据库，我们将使用一个简单数组来保存投票结果。以下是服务器端代码的主体部分：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ------ - ----------------------------------
----- -- - -----------------------------
--- ----- - --- ---
------------------- -------- -- -
-------------- ---- ------------
-------------------- ------- -- ---------
----------------- ------ -- -
-- ----- --- ------ -
-----------
- ---- -- ----- --- ------- -
-----------
-
------------------------ ------- -- ------
---
----------------------- -- -- -
-------------- ---- ---------------
---
---
------------------- -- -- -
------------------- ------- -- ---- -------
---以上代码实现了以下的功能：
- 将投票结果保存在数组 votes 中
- 新连接服务器的 user 将立即收到目前的投票结果
- 当接收到投票请求时，将相应的投票结果添加到数组 votes 中，并广播给所有连接服务器的 user
- 断开连接的 user 将在控制台中输出一条信息
客户端
由于 Socket.io 具有自适应性，它可以与任何可以使用 JavaScript 的浏览器一起使用。以下是将会使用的客户端代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- --
--------------- ------ --------------
-------
------
------------ ------ -----------
------- -----------------------------
------- -------------------------------
---- --------------
-------------
-- -----------------
-- ------------------
------
------- ---------------------------------------
--------
----- ------ - -----
------------------ ------- -- -
---------------------------------------- - ---------
----------------------------------------- - ---------
---
------------------------------------------------------------- -- -- -
------------------- -------
---
-------------------------------------------------------------- -- -- -
------------------- --------
---
---------
-------
-------以上代码实现了以下的功能：
- 当收到投票结果时，更新网页上的投票结果
- 当点击“Red”按钮时，向服务器发送红色代表的投票请求
- 当点击“Blue”按钮时，向服务器发送蓝色代表的投票请求
总结
我们已经成功地使用 Socket.io 实现了一个实时投票系统。在这个案例中，我们看到了客户端和服务器端如何使用 Socket.io 协作以实现实时通信的功能。这个案例也提供了一个起点，让我们在完成该基础示例的同时，开始为自己更复杂的应用程序添砖加瓦。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648fc0cd48841e9894de7cf3