一个极简易聊天系统
## 服务器端
node.js + socket.io
简易代码
const http = require(\"http\"); //创建服务
const fs = require(\'fs\'); // 读取文件
const chart = require(\'socket.io\'); // 引入socket.io
// 创建一个简易服务
const server = http.createServer((req,res)=>{
console.log(\"服务启动\");
// 读取文件内容
let html = fs.readFileSync(\'./index.html\')
// 返回给客户端
res.end(html)
})
// 监听3000 端口
server.listen(\"3000\")
// 创建io，并连接服务
const io = chart(server); // 挂载服务
// 监听连接
io.on(\'connection\', socket => {
console.log(\"有新人进来了\");
socket.on(\'message\', data => { // 监听客户端消息
io.emit(\"message\",data) // 发送消息
});
socket.on(\'disconnect\', () => {
console.log(\"有人退出了\");
});
});
## 客户端的极丑页面
简易代码
<!DOCTYPE html>
<html lang=\"en\">
<head>
< charset=\"UTF-8\">
< name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
< http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
< >Document</ >
</head>
<body>
<h2>测试一个聊天</h2>
<ul id=\"list\"></ul>
<input type=\"text\" id=\"mes\">
<input type=\"button\" id=\"btn\" value=\"send\">
</body>
<!-- 客户端引入 socket.io ，我这个路径是在node_modules -->
< src=\"/socket.io/socket.io.js\"></ >
< >
window. = function () {
// 立即执行函数
(function () {
// 连接服务
var socket = io.connect(\'/\');
var html;
// 获取输入框和按钮，以及ul 的dom
var mes = document.querySelector(\"#mes\"),
ul = document.querySelector(\"#list\"),
btn = document.querySelector(\"#btn\");
// 点击按钮发送消息
btn. = () => {
socket.emit(\"message\", mes.value);
// 清空输入框
mes.value = \'\';
}
// 监听服务器端发过来的消息
socket.on(\"message\", (val) => {
// console.log(val);
html += `<li>${val}</li>`
ul.innerHTML = html;
});
})();
}
</ >
</html>
## 说明一下
通过 npm 安装 https://www.npmjs.com/package/socket.io
引入的时候按上边的路径
cdn引入的注意一下
继续阅读与本文标签相同的文章
上一篇 :
数据智能助力智慧航空：阿里云双十一特别访谈
下一篇 :
干货满满，Android热修复方案介绍
-
Cassandra全球使用的公司及场景
2026-05-18栏目： 教程
-
如何创建云数据库RDS？
2026-05-18栏目： 教程
-
基于Selenium+Python的web自动化测试框架
2026-05-18栏目： 教程
-
阿里云MaxCompute 2019-8月刊
2026-05-18栏目： 教程
-
最佳 Linux 发行版汇总
2026-05-18栏目： 教程