socket.io实现简易版群聊

article/2025/10/23 5:34:56

最近学了点 websocket 的技术知识，了解到 node.js 有相关技术——socket.io可以实现，就想着实现一个简单版本的群聊。

先看看效果图

在浏览器中打开2个窗口，访问 http://localhost:3000/socket

在这里插入图片描述

目录结构

在这里插入图片描述

node 服务器代码实现

需要安装 express 和 socket.io。

下面的代码开放了 public 文件目录为可以公开访问的文件目录，里面主要放置一些 css 文件。

 app.use(express.static(path.join(__dirname, 'public')));

index.js

const express = require("express");
const app = express();
const port = 3000
var path = require('path');var server = require('http').Server(app);
var io = require('socket.io')(server);
// var io = require('socket.io')(server, { transports: ['websocket'] })app.use(express.static(path.join(__dirname, 'public')));app.get('/socket', (req, res) => {// res.send('Hello World!')res.sendFile(__dirname + '/pages/socket/index.html');})io.on('connection',  (socket) => {socket.on('start', (data) => {socket.broadcast.emit('msg', { type: 'welcome', msg: data.user+'加入群聊' });// io.emit('msg', { type: 'welcome', msg: data.user+'加入群聊' });});socket.on('msg', (data) => {socket.broadcast.emit('msg', { type: 'msg', msg: data.ms });// io.emit('msg', { type: 'welcome', msg: data.ms });});});server.listen(port, () => {console.log(`Example app listening on port ${port}`)
})

前端实现

前端文件放置在 pages > socket > index.html 路径。

这里引用了2个css文件，主要是 colorUI 的样式，可以到下面网址下载。
https://github.com/weilanwl/ColorUI/

并且使用了 vue 来做 js 逻辑处理。

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>群聊</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script><link rel="stylesheet" type="text/css" href="/css/main.css" /><link rel="stylesheet" type="text/css" href="/css/icon.css" /><script src="/socket.io/socket.io.js" charset="utf-8"></script><style>@media screen and (max-width: 450px) {}</style></head><body><div id="app"><div class="cu-chat"><template v-for="item in list"><template v-if="item.info"><div class="cu-info round">{{ item.content }}</div></template><template v-else><div class="cu-item" :class=" item.self ? 'self' : '' "><template v-if="item.self"><div class="main"><div class="content shadow">{{ item.content }}</div></div><div class="cu-avatar radius"style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></div><!--<div class="date">13:23</div>--></template><template v-else><div class="cu-avatar radius"style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></div><div class="main"><div class="content shadow"><sapn>{{ item.content }}</sapn></div></div><!--<div class="date">13:23</div>--></template></div></template></template><div style="height:300px"></div></div><div class="cu-bar foot input" style="bottom:0;left:0;right:0"><input style="width: 100%;" v-model.trim="msg" @keyup.enter.native="send"></input><button @click="send" class="cu-btn bg-green shadow margin-right">发送</button></div></div><script>const app = {data() {return {msg: '',list: [],socket: null}},mounted(){let socket = io.connect('ws://localhost:3000');//let timestap = Date.now();sessionStorage.setItem('userID', timestap.toString());socket.on('connect', () => {console.log('已连接');socket.emit('start', {user: '用户'+timestap});// 加入房间socket.on('msg', obj => {if(obj.type == 'welcome'){this.list.push({info: true, content: obj.msg})}else{this.list.push({info: false, content: obj.msg, self: false})}this.scroll();})})this.socket = socket;},methods: {send() {if(this.msg){this.socket.emit('msg', {ms: this.msg});this.list.push({info: false, content: this.msg, self: true});this.msg = '';this.scroll();}},// 滑动到底部scroll(){var div = document.getElementsByClassName('cu-chat')[0];window.scrollTo(0,div.scrollHeight);}}}Vue.createApp(app).mount('#app')</script></body>
</html>