Vue3+ NodeJS + Socket.io搭建聊天室

前言

Vue3官网
socket.io官网
基于这个聊天做了个坦克聊天室。大家可以来捧个场逛两圈
后续会放出完整项目代码以及解析的文章，可以关注一下我的个人博客，谢谢

一、前端Vue（客户端）

1、安装socket.io配套的客户端组件包

npm i socket.io-client

2、使用

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { io,Socket } from "socket.io-client";

 let socket: Socket;
onMounted(() => {
  connectSocket();
})

// 初始化连接
function connectSocket() {
  if (socket) {
    socket.disconnect();
  }
  
  socket = io('ws://localhost:5000',{
    query:{
        myKey:'初始化' // 自定义键
    },
  });
  socket.on("connect", () => {
     console.log('连接成功，自动分配的id：'+socket.id)
  });

  socket.on("OnMessage", (info) => { // OnMessage这个名字是和后端协商好的名字，自由定义
     console.log('接收到消息：', info)
  });
}

// 发送消息
function sendMsg(){
  if (socket && socket.connected) {
    socket.emit("SendMessage", { // 这个名字一样是由前后端自定义的
      from: socket.id,
      type: 2,
      msg: val,
    });
  }
}


</script>

二、后端Node（服务端）

1、安装

npm i socket.io

2、使用，分情况

1)：纯socket，不与其他服务一起

import { Server } from "socket.io";

const io = new Server({ /* 配置 */ });

io.on("connection", (socket) => {
   socket.on('SendMessage, (info) => { // 监听客户端发来的消息
      io.emit('OnMessage', info); // 推送给所有客户端
   });
});

io.listen(5000); // 监听端口

2)：基于Express

import * as express from "express";
import { createServer } from "http";
import { Server } from "socket.io";

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, { /* 配置 */ });

io.on("connection", (socket) => {
   //同上
});

httpServer.listen(3000);

End

socket.io是建立在 WebSocket 协议之上，并提供额外的保证，例如回退到 HTTP 长轮询或自动重新连接。
通信代码基本是
监听事件：
socket.on(“自定义事件名”, (info)=>{

})
触发事件
socket.emit(“自定义事件名”, {name:‘Jone’})