Vue3+NodeJS+Soket.io实现实时聊天的示例代码

// src/views/home.vue
<template>
  <div class="container">
    <div class="chat-content">
      <template v-if="chatList && chatList.length">
        <div
          v-for="(chat, index) in chatList"
          class="message-box"
          :class="{'right-message': chat.user.id === userInfo.user.id}"
          :key="index"
        >
          <div class="user">
            <el-avatar v-if="chat.user.id !== userInfo.user.id" class="avatar" :src="chat.user.avatar" ></el-avatar>
            <div class="info">
              <div class="name">{{chat.user.name}}</div>
              <div class="time">{{chat.createTime}}</div>
            </div>
            <el-avatar v-if="chat.user.id === userInfo.user.id" class="avatar" :src="chat.user.avatar" ></el-avatar>
          </div>
          <div class="message"><div class="block">{{chat.message}}</div></div>
        </div>
      </template>
      <div v-else class="empty">
        没有消息
      </div>
    </div>
    <div class="chat-bottom">
      <el-input v-model="chatMsg" class="chat-input" placeholder="请输入内容" />
      <el-button class="chat-btn" type="primary" @click="sendMsg">发送</el-button>
    </div>
    <div style="margin-top: 10px;">当前用户：
      <el-select v-model="userInfo.user" value-key="id" @change="selectUser" placeholder="Select">
        <el-option
          v-for="item in userList"
          :key="item.id"
          :label="item.name"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

const avatar = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
export default {
  name: 'HomePage',
  setup() {
    const chatList = ref([]); // 消息列表
    const chatMsg = ref('');
    const userList = [{ name: '用户1', id: 0, avatar }, { name: '用户2', id: 1, avatar }]; // 用户列表，总共有两个用户
    const userInfo = Reactive({ user: userList[0] }); // 当前登录的用户
    const selectUser = (user) => {
        // 切换当前登录的用户
      userInfo.user = user;
    };
    return {
      chatMsg,
      chatList,
      userList,
      userInfo,
      
      selectUser
    };
  },
};
</script>

<style lang="sCSS" scoped>
...
</style>

npm i socket.io-client

// src/views/home.vue
<template>
...
</template>
<script>
import { onMounted, ref, reactive } from 'vue';
import io from 'socket.io-client';

const avatar = 'Https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';

export default {
  name: 'HomePage',
  setup() {
    const chatList = ref([]);
    const chatMsg = ref('');
    const userList = [{ name: '用户1', id: 0, avatar }, { name: '用户2', id: 1, avatar }];
    const userInfo = reactive({ user: userList[0] });
    let socket;
    onMounted(() => {
      socket = io('http://localhost:3001'); // 连接后端的 socket.io 方法里面传服务端的ip
      socket.on('connect', () => {
        console.log(socket.id, '监听客户端连接成功-connect');
      });
      socket.on('fresh-message', (data) => {
        // 自定义一个事件来获取，服务端推送回来的消息列表
        chatList.value = data;
      });
    });
    const selectUser = (user) => {
        // 切换当前登录的用户
      userInfo.user = user;
    };
    const sendMsg = () => {
      // 发送消息，通过自定义事件 send-message
      socket.emit('send-message', userInfo.user, chatMsg.value);
      chatMsg.value = '';
    };
    return {
      chatMsg,
      chatList,
      userList,
      userInfo,

      sendMsg,
      selectUser,
    };
  },
};
</script>

npm install --save koa moment http socket.io

// app.js
const Koa = require('koa');
const http = require('http');
const { Server } = require('socket.io');
const moment = require('moment');

const app = new Koa();

const chatList = [];
const server = http.createServer(app.callback());
const io = new Server(server, {
  serveClient: false,
  cors: {
    origin: '*', // from the screenshot you provided
    methods: ['GET', 'POST'],
  },
});

io.on('connection', (socket) => {
  socket.emit('fresh-message', chatList);
  socket.on('send-message', (user, message) => {
    const createTime = moment().fORMat('YYYY-MM-DD HH:mm:ss');
    chatList.push({
      user,
      message,
      createTime,
    });
    socket.emit('fresh-message', chatList);
  });
});
io.listen(3001);