nodejs+express+socket.io快速搭建服务器
- Express 应用程序生成器 可使用应用程序生成器工具 (express) 快速创建应用程序框架。
安装生成器命令：
$ npm install express-generator -g
创建ejs模板引擎项目，名字为server：
$ express -e server
安装依赖：
$ cd server
$ npm install
目录结构如下：
启动服务：
$ npm run start
可以全局安装nodeom进行监控，替换原来的"start": node ./bin/www
至此一个简单版本的服务器搭建完成,默认运行在3000端口。
- Socket.IO 服务器初始化
创建了一个 Socket.IO 服务器并将它附加到一个 Node.js HTTP 服务器：
const httpServer = require("http").createServer();
// cors: true 跨域允许，不然前端会报跨域错误
const io = require("socket.io")(httpServer, {
cors: true });
写一些业务逻辑：
io.on("connection", (socket) => {
// 加入房间并通知
socket.on("join", ({
roomid }) => {
console.log(roomid, "进入房间");
socket.join(roomid);
io.in(roomid).emit("say", `${
socket.id}加入了`);
});
// 离开房间并通知
socket.on("leave", ({
roomid }) => {
console.log(roomid, "离开房间");
socket.leave(roomid);
io.in(roomid).emit("say", `${
socket.id}离开了`);
});
// 通过房间号发送消息
socket.on("sendMsgByRoom", ({
roomid, msg }) => {
console.log("通过房间号发送消息", roomid, msg);
io.in(roomid).emit("receiveMsg", msg, socket.id);
});
});
至此Socket.IO 服务器已经写完，服务端已经完成
vue3+socket.io-client快速搭建客户端
- 利用脚手架vue-cli创建vue3项目
安装脚手架命令:
$ npm install -g @vue/cli
创建项目命令：
$ vue create app
根据vue-cli文档步骤创建自己需要的配置
装个ui组件库：
$ npm install element-plus --save
根据element-plus组件库文档进行引入
随手写一个界面大致长这样：
安装socket.io-client：
$ npm install socket.io-client --save
进行连接：
const socket = io("ws://localhost:3000", {
timeout: 5000,
});
监听逻辑：
onMounted(() => {
// 连接成功
socket.on("connect", () => {
console.log(socket.id, "监听客户端连接成功-connect");
});
// 房间好友上线通知
socket.on("say", (message) => {
alert(message);
});
// 收到的消息
socket.on("receiveMsg", (msg, id) => {
// arr为消息列表
arr.value.push(`${
id}：${
msg}`);
});
});
发送逻辑：
// 点击加入房间
const clickJoin = () => {
arr.value.length = 0;
socket.emit("join", {
roomid: roomid.value });
};
// 点击离开房间
const clickLeave = () => {
socket.emit("leave", {
roomid: roomid.value });
roomid.value = "";
};
// 发送消息
const clickSend = () => {
socket.emit("sendMsgByRoom", {
roomid: roomid.value, msg: msg.value });
msg.value = "";
};