Socket.IO 是一个流行的 JavaScript 库，它提供了一种基于事件的实时通信方式，使得开发者可以轻松地构建实时的 WEB 应用程序。本文将介绍如何使用 Socket.IO 来建立实时 WEB 应用程序，并提供示例代码。
Socket.IO 简介
Socket.IO 是一个基于 Node.js 的实时通信库，它可以在客户端和服务器之间建立一个双向的通信通道，从而实现实时通信。Socket.IO 采用了 WebSocket、AJAX 等多种技术，使得它可以在不同的环境下使用。
建立 Socket.IO 连接
要使用 Socket.IO，首先需要在客户端和服务器上分别建立一个 Socket.IO 连接。客户端可以通过引入 Socket.IO 客户端库来建立连接，而服务器则需要使用 Socket.IO 服务器库来建立连接。
以下是客户端建立 Socket.IO 连接的示例代码：
<script src="/socket.io/socket.io.js"></script> <script> const socket = io(); </script>
以上代码中，/socket.io/socket.io.js 是 Socket.IO 客户端库的路径，通过引入该库，就可以在客户端建立 Socket.IO 连接了。
以下是服务器建立 Socket.IO 连接的示例代码：
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('a user connected');
});以上代码中，server 是一个 Node.js 服务器实例，通过调用 require('socket.io')(server) 来建立 Socket.IO 连接。在 io.on('connection') 回调函数中，可以处理客户端连接和断开等事件。
发送和接收消息
建立好 Socket.IO 连接后，就可以通过发送和接收消息来实现实时通信了。Socket.IO 提供了 emit() 和 on() 两个方法来实现消息的发送和接收。
以下是客户端发送消息的示例代码：
const message = 'Hello, Socket.IO!';
socket.emit('message', message);以上代码中，message 是要发送的消息，通过调用 socket.emit('message', message) 方法来发送消息。
以下是服务器接收消息的示例代码：
io.on('connection', (socket) => {
socket.on('message', (message) => {
console.log(message);
});
});以上代码中，通过调用 socket.on('message', callback) 方法来监听客户端发送的消息。在 callback 回调函数中，可以处理接收到的消息。
实现实时聊天室
通过上述方式，我们已经可以建立 Socket.IO 连接并实现消息的发送和接收了。接下来，我们将使用 Socket.IO 来实现一个简单的实时聊天室。
以下是客户端的 HTML 代码：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ------------
------- ---------------------------------------
------- -----------------------------------------------------------
-------
------
--- -------------------
----- ------------------
------ ------------------ -------------------
---------------------
-------
--------
----- ------ - -----
----- ------------ - -------------------
----- ------------- - --------------------
----- --------- - ---------------
--------------------------- -- -
-----------------------
----- ------- - --------------------
----------------- --------- ---------
----------------------
---
--------------- --------- --------- -- -
------------------------------------------
---
---------
-------
-------以上代码中，我们使用了 jQuery 来处理表单提交和消息展示。通过调用 socket.emit('chat message', message) 方法来发送消息，通过调用 socket.on('chat message', callback) 方法来接收消息。
以下是服务器的代码：
-- -------------------- ---- -------
----- --- - ---------------------
----- ---- - ----------------------------
----- -- - ---------------------------
------------ ----- ---- -- -
---------------------- - ---------------
---
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
----------------- ---------------
---
--------------- --------- --------- -- -
------------- --------- ---------
---
---
----------------- -- -- -
---------------------- -- ---------
---以上代码中，我们使用了 Express 和 HTTP 模块来创建一个 HTTP 服务器，并使用 Socket.IO 来建立 Socket 连接。在 io.on('connection') 回调函数中，我们处理了连接和断开事件，并通过调用 io.emit('chat message', message) 方法来广播消息。
总结
本文介绍了如何使用 Socket.IO 来建立实时 WEB 应用程序，并提供了示例代码。Socket.IO 提供了一种基于事件的实时通信方式，使得开发者可以轻松地构建实时的 WEB 应用程序。希望本文能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e489d95b1f8cacd78394e