前端技术 ——Socket 应用之 Socket.io-JavaScript中文网-JavaScript教程资源分享门户

什么是 Socket.io

Socket.io 是一个 JavaScript 库，用于实现实时通信，它可以让你在浏览器和服务器之间建立实时、双向的通信。Socket.io 采用了 WebSocket 协议，同时还支持轮询等方式进行通信，因此可以在不同的浏览器和操作系统下运行。

如何使用 Socket.io

使用 Socket.io，需要先在服务器端安装 Socket.io 模块，然后在客户端引入 Socket.io 客户端库。下面我们来看一下具体的使用方法。

服务器端

首先，我们需要在服务器端安装 Socket.io 模块，通过 npm 命令即可：

npm install socket.io

然后，在服务器端代码中引入 Socket.io，创建一个 Socket.io 实例：

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

接下来，我们可以监听客户端的连接事件，在连接成功后可以进行一些操作：

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

在连接成功后，我们可以向客户端发送消息：

io.on('connection', (socket) => {
  socket.emit('message', 'Hello World!');
});

我们也可以监听客户端发送的消息：

io.on('connection', (socket) => {
  socket.on('message', (data) => {
    console.log(data);
  });
});

客户端

在客户端，我们需要引入 Socket.io 客户端库：

<script src="/socket.io/socket.io.js"></script>

然后，创建一个 Socket.io 实例：

const socket = io();

在连接成功后，我们可以发送消息到服务器：

socket.emit('message', 'Hello World!');

我们也可以监听服务器发送的消息：

socket.on('message', (data) => {
  console.log(data);
});

Socket.io 的应用

Socket.io 的应用非常广泛，可以用于实现聊天室、实时游戏、在线编辑器等功能。下面我们以实时聊天室为例，演示 Socket.io 的应用。

服务器端

首先，我们创建一个 HTTP 服务器，然后引入 Socket.io 模块：

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

然后，监听客户端的连接事件，将连接的客户端保存到一个数组中：

-- -------------------- ---- -------
----- ------- - ---

------------------- -------- -- -
  ---------------------

  -------------- ---- ------------

  -------------------- ------ -- -
    ------------------

    -- -----------
    ------------------------ -- -
      ---------------------- ------
    ---
  ---

  ----------------------- -- -- -
    ----- ----- - ------------------------
    --------------------- ---

    -------------- ---- ---------------
  ---
---

在客户端发送消息时，我们将消息广播给所有客户端。

客户端

在客户端，我们创建一个输入框和一个按钮，用于输入和发送消息：

<input type="text" id="input">
<button id="send">Send</button>

然后，我们在客户端代码中创建一个 Socket.io 实例：

const socket = io();

我们监听按钮的点击事件，将输入框中的消息发送到服务器：

const input = document.getElementById('input');
const send = document.getElementById('send');

send.addEventListener('click', () => {
  const message = input.value;
  socket.emit('message', message);
  input.value = '';
});

同时，我们也监听服务器发送的消息，将消息显示在聊天室中：

socket.on('message', (data) => {
  const message = document.createElement('div');
  message.innerText = data;
  document.body.appendChild(message);
});

总结

通过本文的介绍，我们了解了 Socket.io 的基本用法和应用场景，并实现了一个实时聊天室的示例。Socket.io 提供了一个简单而强大的实时通信解决方案，可以帮助我们实现更多有趣的功能。

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