socket.io实现简易版群聊

林梓阳

已于 2022-08-17 18:17:27 修改

阅读量483

点赞数

分类专栏： websocket Node.js 文章标签： javascript 前端 websocket

于 2022-08-11 11:57:26 首次发布

本文链接：https://blog.csdn.net/weixin_43930421/article/details/126282069

版权

这篇博客介绍了如何利用socket.io和node.js构建一个简单的群聊应用。首先展示了实现后的效果，接着列出了项目目录结构。服务器端通过express和socket.io搭建，允许访问public目录。前端部分使用vue进行js逻辑处理，并结合colorUI库提供样式支持。

摘要由CSDN通过智能技术生成

最近学了点 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 });
		});