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

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

前言

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);