Socket.io是一种基于事件驱动的实时网络通信协议，它可以让网站实现实时通信，支持双向通信。通过使用Socket.io，我们可以在浏览器与服务器之间建立实时通信连接，这为制作多人在线游戏以及其他实时通信应用提供了极大的便利。
在本篇文章中，我们将介绍如何使用Socket.io来实现多人在线答题赛。我们将先了解Socket.io的基本概念，然后介绍如何搭建一个Socket.io服务器以及如何使用Socket.io实现实时通信，最后演示如何使用Socket.io来开发一个简单的多人在线答题赛应用。
Socket.io的基本概念
Socket.io包含两个基本的模块：socket.io-client和socket.io。其中，socket.io-client模块用于浏览器中，包含了socket.io的客户端实现，而socket.io模块用于服务器端，包含了socket.io的服务器端实现。
在使用Socket.io时，我们需要先在服务器端创建一个Socket.io实例，然后在客户端上连接到该实例。当客户端连接成功之后，服务器端就可以监听到客户端发出的事件，并对这些事件作出响应。类似地，客户端也可以监听服务器发出的事件，并对这些事件作出响应。
搭建Socket.io服务器
要在Node.js环境下使用Socket.io，我们需要先安装socket.io模块。使用以下命令即可进行安装：
npm install socket.io
安装完成后，我们可以在Node.js环境中通过以下代码来搭建一个Socket.io服务器：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------- - ---------------------
----- ------ - --------------------
----- -- - -----------------
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
----------------- ---------------
---
---
------------------- -- -- -
---------------------- -- ---------
---以上代码中，我们首先创建了一个HTTP服务器，然后将该服务器实例作为参数传递给socketIO，创建了一个Socket.io实例io。接着，我们通过io.on('connection', ...)监听了连接事件，当有客户端连接到服务器时，就会调用这个事件处理函数。在这个事件处理函数中，我们输出了日志并监听了断开连接事件。最后，我们通过server.listen启动了服务器。
使用Socket.io实现实时通信
在启动了Socket.io服务器之后，就可以在客户端上建立连接并进行实时通讯了。在客户端上，要使用Socket.io，首先需要在HTML页面中引入socket.io脚本：
<script src="/socket.io/socket.io.js"></script>
然后，在JavaScript中，可以通过以下代码来建立连接：
const socket = io();
接下来，我们可以使用socket.emit方法发出事件，使用socket.on方法接收事件。例如，以下是一个简单的客户端代码，它会向服务器发出chat message事件，监听服务器返回的chat message事件：
-- -------------------- ---- -------
----- ------ - -----
----- ------------ - ----------------------------------------
----- ----------- - ---------------------------------------
---------------------------------------------------------------------- ------- -- -
-----------------------
----- ------- - -------------------
-- --------- -
----------------- --------- ---------
------------------ - ---
-
---
--------------- --------- --------- -- -
----- ----------- - -----------------------------
----------------------- - --------
-------------------------------------
---以上代码中，当用户在页面上点击发送消息按钮时，代码会通过socket.emit方法向服务器发出chat message事件，并将用户输入的消息作为事件参数发送给服务器。在接收到服务器响应后，代码会将返回的消息插入到消息列表中。
在Socket.io中，可以自定义处理事件的名称以及要传输的数据。例如，我们可以使用以下代码在服务器端向所有客户端广播一个系统消息：
io.emit('system message', '欢迎加入在线答题赛！');此外，Socket.io还支持在特定的房间中进行通信，可以使用socket.join方法将客户端加入到一个指定的房间中，然后在服务器端使用io.to(roomName).emit(event, data)方法向指定房间中的客户端发送事件。例如，以下代码演示了如何将一个客户端加入到一个名为room-1的房间中，并向这个房间中的所有客户端发送一个事件：
io.on('connection', (socket) => {
socket.join('room-1');
io.to('room-1').emit('system message', '新的玩家加入了游戏！');
});实现多人在线答题赛
现在，我们已经掌握了Socket.io的基本概念，并且搭建了Socket.io服务器，并使用Socket.io实现了实时通信。接下来，我们将使用Socket.io来开发一个多人在线答题赛应用。
在这个应用中，我们将创建一个简单的题库，玩家需要在规定的时间内从题库中选择并回答问题。所有的玩家都可以在同一个房间中参加游戏，并且实时在页面上看到其它玩家的分数。
接下来，我们将逐步编写这个应用的前端和后端代码。
前端代码
以下是我们将使用的HTML模板，用于显示问题和玩家的分数：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------
-------
------
--------------
---- --------------------
---- -------------------
---- ----------------
------------------
------ ----------- -----------------
------- -------------------------------------
------
--- ----------------------
------- ---------------------------------------
------- -------------------------------
-------
-------接下来，我们在app.js中添加JavaScript代码，实现玩家的答题逻辑以及与服务器的通信：
-- -------------------- ---- -------
----- ------ - -----
----- --------------- - ------------------------------------
----- -------------- - -----------------------------------
----- ----------- - ---------------------------------------
--- ----------- - ---------------------------------------
--- ------------------ - ----------------------------------------------
--- ---------- - ---
-------------------------------------------- ------- -- -
-----------------------
----- ------ - ------------------
-- -------- -
--------------------- ------- ------------
----------------- - ---
-
---
----------------- ------ ------ -- -
---------- - -----
---
--------------------- ---------- -- -
------------------------- - ---------------
---
-------------------- --------- -- -
----- --------------------------- -
------------------------------------------------------
-
------------------------ -- -
----- ------------- - -----------------------------
------------------------- - ----------- - -- - - -------------
------------------------------------------
---
---
----------------- --------- --------- -- -
----- ----------- - -----------------------------
----------------------- - --------
-------------------------------------
---在以上代码中，我们首先通过socket.on方法监听了从服务器传输过来的问题、玩家列表和系统消息等事件。接着，在提交答案按钮上添加了点击事件监听器，当用户点击了提交答案按钮时，代码会使用socket.emit方法向服务器发出answer事件，并将用户输入的答案及玩家名称作为事件参数发送给服务器。
需要注意的是，在player name事件上，代码从服务器接收了玩家名称，并保存在一个全局变量playerName中，这样才能在提交答案时将玩家名称传递给服务器。以下是服务器端相应的处理代码：
-- -------------------- ---- -------
----- ------- - ---
----- --------- - -
------- --------------- -------- ------------ ----------- ----------- --------- ------- ------------
------- -------------- -------- ------ ----- ----- ----- ------- ------
------- ----------------- -------- ------ ----- ----- ------ ------- ------
------- ------------------- -------- ---------- --------- ---------- --------- ------- ---------
--
-------- ------------------- -
----- ----- - ------------------------ - ------------------
------ -----------------
-
-------------- -- -
----- -------- - --------------------
------------------- ----------
-- ------
-------- ------------ -
----- ---------- - ---
--- ------ --- -- -------- -
-- ----------------------------- -
----- ------ - -------------
---------------------- ------------ ------ ---------------
-
-
------------------- -- -- -
------ ------- - --------
---
------ -----------
--
------------------- -------- -- -
--- -----------
----------------------- ---------------------
------------------- -------- ----- -- -
----- ------ - --------------
-- ------- -- ----------------- -
--------------- - -----
-- ------- --- ----------------------- -
---------------
--------------- --------- ----------------
- ---- -
--------------- --------- ----------------
-
------------------ --------------
-
---
----------------------- -- -- -
-- ------------ -
------ --------------------
--------------- --------- ----------------------
------------------ --------------
-
---
----------------- ------ ------ -- -
---------- - -----
------------- - ------ ----- ------ -- --------- ------ --------- ---------------------
---------------------- --------------
--------------- --------- ----------------
---
---在服务器端，我们保存了一个问题列表以及一个玩家列表。服务器端将每隔5秒随机抽取一个问题并广播给所有客户端。当客户端向服务器发出答题请求时，服务器会检查该玩家是否已经答过题，如果没有则进行判断，并根据答案的正确性更新玩家列表和发出系统消息。当客户端连接到服务器时，服务器将为该客户端分配一个随机的玩家名称，并将它保存在players列表中，同时广播一条系统消息。
启动应用
完成了以上代码后，就可以使用以下命令来启动应用：
node server.js
启动成功后，在浏览器中打开http://localhost:3000即可开始多人在线答题赛。
总结
本篇文章介绍了Socket.io的基本概念、如何搭建Socket.io服务器以及如何使用Socket.io实现实时通信。最后，我们演示了如何使用Socket.io开发一个多人在线答题赛应用。学习并实践本篇文章的内容，可以帮助我们更深入地了解Socket.io以及如何使用Socket.io开发实时通信应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645a12d7968c7c53b0c31204