套接字（Socket）是计算机网络编程中常用的一种通信机制。它允许应用程序通过网络进行数据传输，适用于客户端与服务端之间的通信。
在前端开发中，我们通常使用WebSockets来实现客户端与服务端之间的双向通信。本文将介绍如何在JavaScript中使用WebSockets。
WebSocket简介
WebSocket是一种基于TCP协议的双向通信协议，在2011年被标准化。它解决了HTTP协议只能由客户端主动发起请求、服务器被动响应的限制，使得服务器也可以主动向客户端发送消息，从而实现了真正意义上的双向通信。
WebSocket连接的建立需要经过"握手"过程，握手成功后，客户端和服务器之间就可以互相发送消息了。WebSocket是以帧为单位进行通信的，每个帧包含一个头部和一个消息体。头部包含了该帧的类型、长度等信息，消息体则是具体的消息内容。
JavaScript中使用WebSocket
在JavaScript中，我们可以使用WebSocket对象来创建WebSocket连接。以下是一个简单的例子：
----- -- - --- --------------------------------- --------------------------- -- -- - ------------------------------- --- ------------------------------ ----- -- - ---------------------- ------------ --- ---------------------------- -- -- - ------------------------------- ---
上面的代码创建了一个WebSocket对象，并通过addEventListener方法添加了三个事件监听器：
open事件在连接建立时触发；message事件在收到消息时触发；close事件在连接关闭时触发。
通过send方法可以向服务器发送消息：
--------------- ----------
如果想要关闭连接，可以调用close方法：
-----------
示例代码
以下是一个简单的示例，演示了如何使用WebSocket实现一个聊天室应用。该示例包含了服务端和客户端两部分代码。
服务端代码
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -- -- -
--------------------------------
---------------- ------- -- -
---------------------------------------
-------------------------- -- -
-- ------- --- -- -- ----------------- --- --------------- -
---------------------
-
---
---
-------------- -- -- -
---------------------------------
---
---客户端代码
--------- -----
------
------
----- ----------------
---------------------------
-------
------
------ ----------- -------------------- --------------
------ ----------- --------------------- -------------
------- ---------------------------
--- ----------------------
--------
----- ------------- - ------------------------------------
----- ------------ - -----------------------------------
----- ---------- - --------------------------------------
----- ----------- - ---------------------------------------
----- -- - --- ---------------------------------
--------------------------- -- -- -
-------------------------------
---
------------------------------ ----- -- -
----- - --------- ------- - - -----------------------
----- -- - -----------------------------
------------ - ------------- ------------
----------------------------
---
---------------------------- -- -- -
-------------------------------
---
------------------------------------ -- -- -
----- -------- - --------------------
----- ------- - -------------------
------------------------ --------- -------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------