什么是 Socket.io？
Socket.io 是一个面向实时 web 应用开发的 JavaScript 库，它基于 WebSockets 技术实现了双向通信，可以让客户端和服务器之间实时地交换数据。它是一个跨浏览器、跨平台的解决方案，可以在不同的设备和浏览器之间建立实时连接，支持多种传输方式，如 WebSocket、AJAX 长轮询等。
Socket.io 的基本概念
1. Socket
Socket 是指在客户端和服务器之间建立的实时连接，它是一个双向通信的通道，可以通过它发送和接收数据。在 Socket.io 中，每个客户端和服务器之间都会建立一个 Socket。
2. Server
Server 是指 Socket.io 应用程序的服务器端，它负责接收和处理客户端的连接请求，并与客户端之间建立实时连接。
3. Client
Client 是指 Socket.io 应用程序的客户端，它通过连接服务器来建立一个 Socket，并与服务器之间实时地交换数据。
Socket.io 应用实例
下面是一个基于 Socket.io 的聊天室应用实例，它可以让多个用户在同一个聊天室中实时地交流。
1. 服务器端代码
// javascriptcn.com 代码示例
const io = require('socket.io')(3000);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
io.emit('chat message', msg);
});
});在这个例子中，我们使用了 Node.js 平台和 Socket.io 库来创建一个服务器端应用程序。首先，我们通过调用 require('socket.io') 方法来加载 Socket.io 库，并将其传递给 io 变量。然后，我们通过调用 io.on('connection') 方法来监听客户端的连接请求，并在连接成功后执行回调函数。在回调函数中，我们使用 socket.on('event') 方法来监听客户端发送的事件，例如 disconnect 事件和 chat message 事件。当客户端发送 chat message 事件时，我们通过调用 io.emit('event') 方法来将消息发送给所有已连接的客户端。
2. 客户端代码
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>Socket.io Chat Example</title>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
document.getElementById('chat-form').addEventListener('submit', (e) => {
e.preventDefault();
var msg = document.getElementById('chat-input').value;
socket.emit('chat message', msg);
document.getElementById('chat-input').value = '';
});
socket.on('chat message', (msg) => {
var li = document.createElement('li');
li.textContent = msg;
document.getElementById('chat-messages').appendChild(li);
});
</script>
</head>
<body>
<ul id="chat-messages"></ul>
<form id="chat-form">
<input id="chat-input" autocomplete="off"/>
<button>Send</button>
</form>
</body>
</html>在这个例子中，我们使用了 HTML、CSS 和 JavaScript 来创建一个客户端应用程序。首先，我们通过调用 <script src="/socket.io/socket.io.js"></script> 将 Socket.io 库加载到页面中，并使用 var socket = io() 来创建一个 Socket。然后，我们通过调用 socket.emit('event') 来发送事件给服务器端，例如 chat message 事件。当服务器端发送 chat message 事件时，我们通过调用 socket.on('event') 方法来监听事件并执行回调函数，例如将消息添加到聊天室中。
总结
Socket.io 是一个非常强大的 JavaScript 库，它可以让我们轻松地实现实时 web 应用程序。在本文中，我们介绍了 Socket.io 的基本概念和应用实例，并提供了示例代码作为参考。通过学习 Socket.io，我们可以更好地理解实时 web 应用程序的工作原理，并将其应用于我们自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6509717595b1f8cacd42b659