从零开始：利用Socket.IO创建实时聊天室

2023-11-03 16:20:14

踏入实时通信的新天地

信息技术的飞速发展，对数据的实时性提出了更高的要求。传统的客户端-服务器通信模式中，客户端需要主动发起请求才能获取数据更新，无法实现数据的实时推送。为了解决这一难题，Socket.IO应运而生。作为一种双向通信框架，Socket.IO使数据在客户端和服务器之间可以双向实时传输，为实时应用的开发提供了强大的技术支持。

初探Socket.IO：一个简易聊天室

为了更深入地理解Socket.IO的运作机制，我们着手搭建了一个简易的聊天室。在这个聊天室中，用户可以实时地发送和接收消息，体验Socket.IO的魅力。

技术栈

Node.js
Express
Socket.IO

步骤

1. 搭建服务器

const express = require('express');
const app = express();
app.use(express.static('public'));
const server = app.listen(3000);

2. 安装Socket.IO

npm install socket.io

3. 整合Socket.IO

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

4. 处理客户端连接

io.on('connection', (socket) => {
  // 处理客户端发来的消息
  socket.on('chat message', (msg) => {
    // 向所有已连接的客户端广播消息
    io.emit('chat message', msg);
  });
});

5. 客户端代码

<script>
  // 建立与服务器的连接
  const socket = io();

  // 发送消息
  document.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault();
    const msg = document.querySelector('input').value;
    socket.emit('chat message', msg);
  });

  // 接收消息
  socket.on('chat message', (msg) => {
    // 在页面中显示消息
    const li = document.createElement('li');
    li.textContent = msg;
    document.querySelector('ul').appendChild(li);
  });
</script>