从零开始搭建 web 聊天室（一）

article/2025/10/14 1:29:07

本篇将介绍如何快速、简便地使用 socket.io 库搭建一个 web 在线聊天室。前端并没有使用任何框架。后端使用 express 框架搭建简易的后端。

socket.io 库本质上是基于 websocket 上进行封装。改变了以往只能前端发送请求，后端才能返回给前端信息，这样的一问一答形式。实现了前后端双向通信，即后端也可以主动 push 信息到前端。websocket 尤其适用于在线聊天或者实时交互的场景。已经广泛用于直播平台、视频平台等。

本篇实现：

最基本的前后端信息交互。

代码地址：

https://github.com/billmian/socketio-chat

技术栈：

前端 html + socketio
后端 express 框架

首先先创建 index.html 和 index.js 两个文件

index.html 文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script src="/socket.io/socket.io.js"></script><script>var socket = io();socket.emit("newChatMessage", "这是传送给后端的消息");socket.on("broadCastMessage", (msg) => {console.log("这里输出后端返回的消息", msg);renderContent(msg);});</script>
</html>

index.js 文件中：
先使用 npm 安装库 socket.io express

npm install socket.io  express --save

var express = require("express");
var app = express();
var http = require("http").createServer(app);var io = require("socket.io")(http);
app.get("/", (req, res) => {res.sendFile(__dirname + "/index.html");
});io.on("connection", (socket) => {socket.on("newChatMessage", (msg) => {console.log("message: " + msg);io.emit("broadCastMessage", "后端传过来的消息");});
});
http.listen(3000, () => {console.log("listening on *:3000");
});