跨越网络：Socket.io聊天室开发指南

2023-09-30 20:27:24

在当今快节奏的信息时代，实时通信已成为不可或缺的重要技术。Socket.io作为一个开源的实时通信库，以其跨平台、轻量化、易上手等特点，受到众多开发者的青睐。

本文将带您领略Socket.io的魅力，共同开启实时通信的奇妙之旅，目标是运用Socket.io快速创建一款功能丰富的聊天室应用程序。

前期准备：

搭建Express服务器，处理Socket.io事件。

Socket.io服务器端

const express = require('express');
const socketIO = require('socket.io');

const app = express();
app.use(express.static('public'));

const server = app.listen(3000, () => {
  console.log('服务器运行在端口3000');
});

const io = socketIO(server);

io.on('connection', (socket) => {
  console.log('一个新用户连接了');
  
  // 用户发送消息时
  socket.on('message', (msg) => {
    io.emit('message', msg); // 将消息广播给所有用户
  });
  
  // 用户断开连接时
  socket.on('disconnect', () => {
    console.log('一个用户断开了连接');
  });
});

Socket.io客户端

const socket = io.connect('http://localhost:3000');

// 发送消息给服务器
document.getElementById('send-message').addEventListener('click', () => {
  const msg = document.getElementById('message-input').value;
  socket.emit('message', msg);
});

// 监听服务器广播的消息
socket.on('message', (msg) => {
  const chatBox = document.getElementById('chat-box');
  const newMessage = document.createElement('div');
  newMessage.innerHTML = msg;
  chatBox.appendChild(newMessage);
});