利用vue3+socket.io-client和nodejs+express+socket.io快速搭建一个加房间聊天功能(附demo源码地址)

本文链接：https://blog.youkuaiyun.com/SwingDance/article/details/123186715

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 = "";
    };