JavaScript 实现 Socket.IO

简介

Socket.IO 是一种实时通信库，它允许客户端和服务器之间建立双向的、基于事件的通信。它是基于 WebSocket 协议实现的，但也支持其他传输协议，如轮询和长轮询。在前端开发中，Socket.IO 可以用于实现实时聊天、实时游戏、实时数据可视化等功能。

本文将介绍如何使用 JavaScript 实现 Socket.IO，包括如何创建 Socket.IO 服务器和客户端，以及如何发送和接收消息。

安装

在使用 Socket.IO 之前，需要先安装它。可以使用 npm 进行安装：

npm install socket.io

服务器端

创建服务器

创建 Socket.IO 服务器非常简单。只需要使用 require 方法导入 socket.io 模块，并使用 http 模块创建一个 HTTP 服务器。然后，将 HTTP 服务器作为参数传递给 socket.io 的 listen 方法即可创建一个 Socket.IO 服务器。

// javascriptcn.com 代码示例
const http = require('http');
const io = require('socket.io');

const server = http.createServer();
const ioServer = io(server);

server.listen(3000, () => {
  console.log('Socket.IO server is listening on port 3000');
});

监听连接事件

一旦创建了 Socket.IO 服务器，就可以监听 connection 事件，该事件在客户端连接到服务器时触发。在 connection 事件处理程序中，可以使用 socket 对象与客户端进行通信。

ioServer.on('connection', socket => {
  console.log('A client connected');

  socket.on('disconnect', () => {
    console.log('A client disconnected');
  });
});

在上面的代码中，当有客户端连接到服务器时，会打印出 A client connected。当客户端断开连接时，会打印出 A client disconnected。

发送和接收消息

在 Socket.IO 中，可以使用 socket 对象发送和接收消息。发送消息使用 emit 方法，接收消息使用 on 方法。

ioServer.on('connection', socket => {
  socket.emit('greeting', 'Hello, client!');

  socket.on('greeting', message => {
    console.log(`Received message: ${message}`);
  });
});

在上面的代码中，当客户端连接到服务器时，服务器会向客户端发送一条消息 Hello, client!。当客户端发送一条消息 greeting 时，服务器会打印出 Received message: greeting。

客户端

创建客户端

创建 Socket.IO 客户端也非常简单。只需要在 HTML 中导入 Socket.IO 客户端脚本，并使用 io 方法创建一个 Socket.IO 客户端实例。

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

发送和接收消息

在 Socket.IO 客户端中，可以使用 emit 方法发送消息，使用 on 方法接收消息。

const socket = io();

socket.emit('greeting', 'Hello, server!');

socket.on('greeting', message => {
  console.log(`Received message: ${message}`);
});

在上面的代码中，当客户端创建成功后，会向服务器发送一条消息 Hello, server!。当服务器发送一条消息 greeting 时，客户端会打印出 Received message: greeting。

总结

本文介绍了如何使用 JavaScript 实现 Socket.IO，包括创建 Socket.IO 服务器和客户端，以及发送和接收消息。Socket.IO 可以用于实现实时聊天、实时游戏、实时数据可视化等功能，是前端开发中非常有用的工具。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e2e5195b1f8cacd776636