SocketIO 连接 WebSockets - JavaScript

SocketIO 是一个 JavaScript 应用程序框架，用于实现实时应用程序，它支持双向通信，允许您创建实时 Web 应用程序。 SocketIO 通过 WebSocket 协议（HTML5 中的标准协议）在客户端和服务器之间创建持久连接，使它们能够在 Web 上进行实时交互。

客户端代码

在客户端，我们可以使用 SocketIO 库连接 WebSocket 服务器。在 JavaScript 中，我们可以使用以下代码连接到 SocketIO 服务器。

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

上面的代码包括一个 SocketIO 库的引用，然后创建了一个新的 SocketIO 客户端对象（socket）。客户端现在可以使用此对象与服务器进行通信。此外，许多客户端库（例如 jQuery 和 React）都可以与 SocketIO 一起使用。

服务器端代码

在服务器端，我们需要使用 Node.js 并使用我们可以使用 SocketIO 的库。以下是一个简单的 Node.js 服务器，用于处理 SocketIO 连接：

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

以上代码中，我们初始化了 Node.js 应用程序，并创建了一个 index.html 文件。通过调用 io.on('connection', ...) 函数，我们可以监听连接事件，在客户端连接到服务器时运行处理函数。

发送消息

在客户端与服务器建立连接后，我们可以使用 socket.emit() 方法从客户端向服务器发送消息。在服务器端，我们可以使用 socket.on() 方法监听来自客户端的消息。

以下是客户端向服务器发送消息和服务器接收消息的示例代码：

// 在客户端发送消息
socket.emit('message', 'Hello Server!');

// 在服务器端接收消息
io.on('connection', (socket) => {
  socket.on('message', (msg) => {
    console.log('Message received: ', msg);
  });
});

总结

使用 SocketIO，我们可以轻松地实现双向通信，将实时 Web 应用程序带入新的高度。与 WebSocket 一起使用，SocketIO 可以让我们创建实时 Web 应用程序，并在客户端和服务器之间创建持久性连接。上面的示例代码介绍了如何在客户端和服务器之间建立连接以及如何发送和接收消息，这是实时 Web 应用程序开发中最基本的部分之一。