简介
WebSockets 是 HTML5 中新增的一种协议，它可以实现双向通信，从而取代了传统的 AJAX 技术。而现在越来越多的前端开发者采用 Socket.io 框架来实现 WebSockets 协议，使得开发更加方便。
本文将介绍如何使用 Socket.io 实现一个基于 WebSockets 协议的应用案例，并且提供相应的代码示例。
环境准备
在开始之前，需要先安装 Node.js 和 Socket.io。可以从 Node.js 的官网上下载最新版本的 Node.js。安装完成后，通过以下命令安装 Socket.io：
npm install socket.io -g
实现一个简单的聊天室
下面我们将使用 Socket.io 实现一个简单的聊天室。为了简化流程，我们只实现两个功能：
- 用户进入聊天室后可以动态地向其他用户发送消息
- 聊天室中的在线用户可以实时查看其他用户加入或者离开的时间
服务端代码
以下是服务端的代码：
-- -------------------- ---- -------
----- -- - ---------------------------
------------------- -------- -- -
---------------------
----------------- ------ -- -
------------------------- ---------
-- -----------
------------------- -
----- ----------
---------- --- -----------------------
---
---
-------------------- ------ -- -
------------------------- --------------------------
-- ------
------------------------------------ -
----- ----------
-------- -------------
---------- --- -----------------------
---
---
----------------------- -- -- -
-----------------------
-- -----------
---------------------------------- -
---------- --- -----------------------
---
---
---
--------------------------------在服务端启动后，我们通过 io 对象监听 connection 事件，一旦有用户连接到聊天室，我们就会打印出 “用户已连接”的信息。同时，socket 对象还提供了 on 方法来监听客户端的数据。我们定义了 join、message 和 disconnect 事件，分别对应用户加入聊天室、用户发送聊天信息和用户断开连接。
在上述代码中，我们使用了 io.emit() 方法来向客户端广播消息。除此之外，Socket.io 还提供了其他方法来让我们更好地与客户端进行交互：
socket.emit()：将消息发送给当前用户socket.broadcast.emit()：将消息发送给除当前用户以外的所有用户
客户端代码
以下是客户端的代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------------
------- ------------------------------------------------------------
-------
------
------------
------ ----------- ------------- --------------------- --
------- -------------------------------
--- --
--- --
---- ------------------------
--- --
------ ----------- ------------ ------------------------ --
------- ----------------------------
--------
----- ------ - ----------------------------
--- -------- - ---
-------- ------ -
-------- - ------------------------------------------
------------------- -
----- --------
---
-
-------- ------ -
----- ------- - -----------------------------------------
---------------------- -
----- ---------
-------- -------
---
-
--------------------- ------ -- -
--------------------------- ----------------------------
---
---------------------- ------ -- -
----------------------------------------------
---
------------------------ ------ -- -
-------------------------------- ------------- ------------------
---
-------- ---------------------- -
----- ----------- - ----------------------------------------
----- - - ----------------------------
----------- - --------
---------------------------
-
---------
-------
-------首先，我们在客户端引入了 Socket.io。在 HTML 中，我们定义了一个聊天室的界面，并且只提供了两个功能：进入聊天室和发送消息。
在 JS 中，我们通过 io() 方法与服务端建立连接。我们定义了 join() 和 send() 方法分别对应用户加入聊天室和用户发送信息操作。当服务端有广播消息时，客户端通过 socket.on() 方法来监听，且调用 appendMessage() 方法。在该方法中，我们通过 DOM 操作将消息添加到界面上。
总结
本文详细地介绍了如何使用 Socket.io 实现基于 WebSockets 协议的聊天室案例，并且给出了相应的代码示例。相信通过本文的学习，读者们可以更好地掌握 Socket.io 的使用，实现更多有意义的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bf884b9e06631ab9bf5991