实时通信Socket io的使用示例详解

Socket.io是一个基于WebSockets的实时通信协议，可以让浏览器和服务器之间建立长连接，实现实时的双向通信。下面将详细介绍Socket.io使用示例。

安装Socket.io

首先需要在服务器环境中安装Socket.io。可以通过npm进行安装，执行以下命令：

npm install socket.io

安装完成后，就可以在代码中引入Socket.io库了。

服务端代码示例

以下是一个简单的使用Node.js作为服务器，在服务端代码中使用Socket.io的示例：

const http = require('http');
const socketio = require('socket.io');

const server = http.createServer((req, res) => {
  res.writeHead(200);
  res.end();
});

const io = socketio(server);

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

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

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

const PORT = process.env.PORT || 3000;

server.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

以上代码中，首先创建了一个Node.js服务器，并通过Socket.io库实例化了一个socket.io服务器实例。当有用户连接到服务器时，通过connection事件回调函数，获取客户端的socket，并监听其message事件，当收到客户端发送的消息时，将消息通过io.emit方法广播给所有已连接的客户端。

客户端代码示例

以下是一个简单的使用Socket.io在客户端建立连接，发送消息和接收消息的示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Socket.io client example</title>
  </head>
  <body>
    <input type="text" id="input"/>
    <button id="send">Send</button>
    <ul id="messages"></ul>

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

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

      socket.on('message', (message) => {
        const li = document.createElement('li');
        li.textContent = message;
        document.querySelector('#messages').appendChild(li);
      });
    </script>
  </body>
</html>

以上代码实现了一个简单的聊天应用，页面中有一个输入框和一个发送按钮，当用户点击发送按钮时，通过Socket.io发送消息给服务器，服务器通过广播的方式将消息发送给所有的客户端，客户端收到消息后将其添加到页面上。