vue3+socket.io-client+nodejs实现聊天室

效果

 Introduction | Socket.IO官网文档

Introduction | Socket.IOhttps://socket.io/docs/v4/

准备

前端vue

1. 利用脚手架(vue_cli)快速完成项目的搭建
2. 启动成功
3. npm i socket.io-client 安装聊天室需要的依赖

后端nodejs

1. 全局安装express框架
2. express 项目名
3. 启动成功
4. npm i socket.io 安装后端聊天室需要的依赖

 

服务器代码

1. 创建并连接
2. 监听-收服务器的广播
3. 发送-当前用户发送消息
4. App.vue 如下:

客户端代码

1. 一个带HTML应用+CommonJS方式引入+express框架
2. 创建连接监听
3. 广播-将某个用户的信息广播出去
4. app.js如下:

const express = require("express");
const {
  createServer
} = require("http");
const {
  Server
} = require("socket.io");

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: true,
});

let count = 0;
io.on("connection", (socket) => {
  count++;
  socket.data.username = '用户' + count;
  socket.emit("welcome", {
    time: new Date().toLocaleTimeString(),
    msg: socket.data.username + '进入聊天室'
  });
  socket.on('send', response => {
    console.log(response.data);
    socket.broadcast.emit('broadcast', {
      time: new Date().toLocaleTimeString(),
      msg: response.data,
      username: socket.data.username
    });
  })
  setTimeout(() => socket.disconnect(true), 500000);
});
httpServer.listen(3001, () => {
  console.log('监听http://127.0.0.1:3001');
});

module.exports = app;

总结

1. 正常的http请求是只能客户端发起而聊天就需要服务器的主动推送,原生是通过websocket实现的,这里引入了第三方的库进行,之间引入包,创建实例,调用对应的接口即可
2. 看官网文档很重要,虽然是英文的,但是还是得自己看,因为没有现成的参考