之前听过websocket但是一直没有使用过，后来在找资料时候发现了socket.io这个库，挺好用的，就简单学了一下，然后自己尝试制作一个小的Demo，可以点击这里体验。

前端我使用的是vue3后端使用nodejs的express框架，不多逼逼开整！！！

前端部分

我先讲一下我的想法：匿名聊天顾名思义不用登录，也不保存用户的信息，咱们就给每个用户创建一个随机的ID然后保存在浏览器即可，然后是一个群聊左边显示在线的用户，右边显示聊天框。

首先先要安装一个库，直接 npm i socket.io-client ，然后引入就像这样，有一点需要注意的是这里是https，如果是本地启动就是写node起的服务器地址

import { io } from 'socket.io-client'
const socket = io('https://你的地址', {
  transports: ['websocket', 'polling']
})

接下来简单讲说一下怎么实现通讯，socket可以使用emit发送广播然后使用on接收广播，后面会有代码。

现在先创建一个生成随机id的函数，然后在onMounted中调用判断本地存储,length: number = 15 是我使用的ts，添加了类型以及默认值。

const id = ref<string>('')
const generateSecureRandomId = (length: number = 15) => {
  return [...Array(length)].map(() => Math.random().toString(36)[2]).join('')
}
onMounted(() => {
  if (localStorage.getItem('generateSecureRandomId')) {
    id.value = localStorage.getItem('generateSecureRandomId') || generateSecureRandomId()
  } else {
    id.value = generateSecureRandomId()
    localStorage.setItem('generateSecureRandomId', id.value)
  }

})

emmm....我发现如果我前后端分开写不太好，有一些地方应该一块说的.....就这样吧，后面上全部代码。

先说怎么把数据发送到后端把，我是编写一个函数，点击发送时候触发，这里注意平时使用的axios，这个和封装的axios很像，前面咱们说了socket通过广播接收和获取数据，咱们这里就是使用了emit发送了一个广播，groupChatClient是广播名字，后面跟的一个对象就是发送的数据，咱们把用户的id以及消息和发送时间发过去，注意这个addtime使用了dayjs这个库，使用方法可以去网上搜一下，很简单很好用！！

使用emit发送广播后，后端使用on接可以接收。

const msg = ref<string>('')
const emitMsg = () => {
  if (!msg.value) return
  socket.emit('groupChatClient', {
    id: id.value,
    msg: msg.value.replace(/^\s+|\s+$/g, '') || '',
    addtime: dayjs().format('YYYY-MM-DD HH:mm:ss')
  })
  msg.value = ''
}

-----👀-----

这里我把前端的全部代码复制出来,生成id函数以及发送请求我是自己封装的，请求没使用axios，可以直接更改msgHistory 这个函数就可以了！！！

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
import generateSecureRandomId from '@/utils/createID'
import { io } from 'socket.io-client'
import dayjs from 'dayjs'
import fetchFn from '@/utils/Fetch'
const socket = io('xxxx', {
  transports: ['websocket', 'polling']
})
interface msg_list {
  id: string
  msg: string
  addtime: string
}

socket.on('userList', (data) => {
  userList.value = []
  data.forEach((v: any) => {
    v.act = false
    userList.value.push(v)
  })
})
const msgList = ref<Array<msg_list>>([])
socket.on('groupChatServer', (data) => {
  msgList.value.push(data)
  nextTick(() => {
    sc()
  })
})
const id = ref<string>('')
const count = ref<Number>(0)
const userList = ref<any>([])
const chatBox = ref<HTMLElement | null>(null)
const msgHistory = async () => {
  const res = await fetchFn('post', '/socket/msgHistory')
  msgList.value = res
  nextTick(() => {
    sc()
  })
}
const sc = () => {
  if (chatBox.value) {
    chatBox.value.scrollTop = chatBox.value.scrollHeight
  }
}

onMounted(() => {
  if (localStorage.getItem('generateSecureRandomId')) {
    id.value = localStorage.getItem('generateSecureRandomId') || generateSecureRandomId()
  } else {
    id.value = generateSecureRandomId()
    localStorage.setItem('generateSecureRandomId', id.value)
  }
  socket.emit('userInfo', { id: id.value })
  msgHistory()
})

const ckUs = (item: any) => {
  if (item.id === id.value) return
  // item.act = !item.act
}
const msg = ref<string>('')
const emitMsg = () => {
  if (!msg.value) return
  socket.emit('groupChatClient', {
    id: id.value,
    msg: msg.value.replace(/^\s+|\s+$/g, '') || '',
    addtime: dayjs().format('YYYY-MM-DD HH:mm:ss')
  })
  msg.value = ''
}
</script>

<template>
  <div class="chat-main">
    <div class="chat-list chat">
      <strong>当前在线人数: {{ userList.length }}</strong>
      <div class="mx-line"></div>
      <div class="user-list x-scroll">
        <ul>
          <li v-for="item in userList" :key="item.id">
            <button
              type="button"
              :disabled="item.id === id"
              @click="ckUs(item)"
              :class="{ act: item.act }"
            >
              {{ item.id }}{{ item.id === id ? '（自己）' : '' }}
            </button>
          </li>
        </ul>
      </div>
    </div>
    <div class="chat-info chat">
      <p>当前用户id：{{ id }}</p>
      <small>( 用户的id是随机生成的 ) 展示最近30条信息</small>
      <div class="mx-line"></div>
      <div class="chat-box x-scroll" ref="chatBox">
        <ul>
          <li
            v-for="item in msgList"
            :key="item.id + item.addtime"
            :class="{ self: item.id === id }"
          >
            <span class="name">{{ item.id === id ? `You` : `${item.id}：` }}</span>
            <div class="msg">{{ item.msg }}</div>
            <small>{{ item.addtime }}</small>
          </li>
        </ul>
      </div>
      <div class="chat-input">
        <label>
          <textarea class="x-scroll" v-model="msg"></textarea>
        </label>
        <button type="button" @click="emitMsg">确定</button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.chat-main {
  margin: 0 auto;
  max-width: 1200px;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  .chat {
    padding: 10px;
    height: 80vh;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 10px;
  }
  .chat-list {
    flex-shrink: 0;
    .user-list {
      height: calc(100% - 35px);
      width: 100%;
      overflow: auto;
      padding: 10px 10px 0 0;

      ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
        li {
          button {
            width: 100%;
            padding: 5px 10px;
            border-radius: 10px;
            border: 1px dashed #333;
            transition: all 0.3s;
            &:disabled {
              background: #333;
              color: #fff;
              cursor: not-allowed;
            }
          }
          .act {
            background-image: linear-gradient(to right, rgba(255, 85, 85, 0.5), #ffffff00);
            color: #333;
            border: none;
          }
        }
      }
    }
  }
  .chat-info {
    flex: 1;
    .chat-box {
      width: 100%;
      height: calc(80vh - 280px);
      overflow: auto;
      border-left: 1px dashed #333;
      border-right: 1px dashed #333;
      padding: 0 10px;
      > ul {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        li {
          display: flex;
          width: 100%;
          .msg {
            padding: 10px;
            max-width: 50%;
            background-color: #ebebeb;
            border-radius: 5px;
          }
          small {
            align-self: flex-end;
            margin: 0 0 0 10px;
          }
        }
        .self {
          justify-content: flex-end;
          gap: 10px;
          .name {
            order: 2;
          }
          .msg {
            order: 1;
            background-color: #95ec69;
          }
          small {
            order: 0;
            margin: 0;
          }
        }
      }
    }
    .chat-input {
      padding: 10px 0 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      label {
        display: flex;
        width: 100%;
        height: 150px;
        padding: 10px;
        overflow: auto;
        border: 1px dashed #333;
        textarea {
          width: 100%;
          height: 100%;
          resize: none;
          border: none;
          outline: none;
        }
      }
      button {
        padding: 5px 10px;
        width: fit-content;
        transition: all 0.3s;
        &:hover {
          background-color: rgba(255, 85, 85, 0.25);
          border-radius: 5px;
        }
      }
    }
  }
}
</style>

后端部分

后端部分直接一步一步来，后端使用了express框架。

准备

首先使用 npm init -y 初始化一下项目，然后下载express，cors，socket.io这几个模块。

mongoose下不下载看个人把，我使用了MongoDB数据库会其他的用其他的也可以。

在创建文件夹以及文件,目录大概这样,类似package.json这种文件我就不列举了，下面是咱们自己创建的

---mongoose
            |---db.js
---router
        |---socket
                    |---groupChat.js
                    |---socketService.js
        |---index.js
 ---index.js

代码编写

1，首先链接数据库，使用的是MongoDB，不连接数据库或者链接其他数据库的可以跳过这一步！

// db.js
const mongoose = require('mongoose');

mongoose.connect("mongodb://mxll:Lxef5KPayKWMTdze@47.109.111.189:27017/mxll").then(() => {
    console.log("Connected to MongoDB......");
}).catch(err => {
    console.log(err)
})

2，编写主文件index.js的内容，这个是一些基本的配置

//index.js
const express = require('express');
const cors = require('cors');
const {
  createServer
} = require('http'); // 使用 HTTP
const socketService = require('./router/socket/socketService');
require("./mongoose/db"); // 引入数据库
const routerApi = require('./router/index');
const app = express();

app.use(express.json());
app.use(cors({}));

app.use('/api', routerApi);

const server = createServer(app); // 不需要 SSL 证书配置

const io = require('socket.io')(server, {});
socketService(io);

server.listen(9527, () => {
  console.log('Server is running on port 9527'); // 更新日志信息
});

3，router文件夹中index.js的内容

// router/index.js
const express = require('express')
const router = express.Router()
const {
    groupMsg
} = require('./socket/groupChat')
router.use('/socket', groupMsg)
module.exports = router

4，socket文件夹中两个文件的编写

groupChat.js:需要注意的是这里就是创建了数据库，使用socket.on接收广播的消息，接受消息是一个回调函数也就是socket.on('广播名字',(data)=>{})这个回调函数的参数就是咱们发送的过来的，当咱们发送完之后再使用emit发送广播数据前端接收即可

//socket/groupChat.js
const mongoose = require("mongoose");
const express = require("express");
const groupMsg = express.Router();
const groupChatSchema = new mongoose.Schema({
    id: String,
    msg: String,
    addtime: String,
    times: {
        type: Date,
        default: Date.now
    }
});
const groupChats = mongoose.model("groupChat", groupChatSchema);
groupMsg.post('/msgHistory', async (req, res) => {
    try {
        const data = await groupChats.find().sort({
            times: -1
        }).limit(30)
        data.reverse()
        res.send(data)
    } catch (err) {
        console.log(err);
        res.send({
            msg: '服务器错误'
        })
    }
})
const groupChat = (io, socket, clients) => {
    socket.on('groupChatClient', async (data) => {
        console.log(data);
        try {
            const newGroupChats = new groupChats(data)
            const res = await newGroupChats.save()
            console.log(res);
            io.emit('groupChatServer', data)
        } catch (err) {
            console.log(err);
            io.emit('groupChatServer', {
                msg: '服务器错误'
            })
        }
    })
}
module.exports = {
    groupChat,
    groupMsg
}

socketService.js:

//socket/socketService.js
const {
  groupChat
} = require('./groupChat')
const io = (io) => {
  const clients = {}
  io.on('connection', (socket) => {
    const count = io.engine.clientsCount
    // 发送数量
    io.emit('count', count)

    // 接收id-显示全部用户
    socket.on('userInfo', (userInfo) => {
      clients[userInfo.id] = {
        ...userInfo,
        'socketId': socket.id
      }
      const userList = Object.values(clients)
      io.emit('userList', userList)
      console.log(clients, '用户列表');

    })
    // 群聊
    groupChat(io, socket, clients)

    socket.on('disconnect', () => {
      const count = io.engine.clientsCount
      io.emit('count', count)

      for (let key in clients) {
        if (clients[key].socketId === socket.id) {
          delete clients[key]
          break
        }
      }

      io.emit('userList', Object.values(clients))
      console.log(Object.values(clients), '用户列表');

    })


  })
}
module.exports = io

结尾

完结撒花🌺🌺🌺