全局安装vue脚手架  npm install @vue/cli -g
创建 vue3 + ts 脚手架  vue create vue3-chatroom

后端代码

src 同级目录下建 server:

 

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);const io = require('socket.io')(server, { cors: true })io.on('connection', (socket) => {console.log('socket 已连接');socket.on('sendToServer', data => {console.log(`收到了前端发来的消息: ${data}`);io.emit("sendToClient", data);})socket.on('disconnect', () => {console.log('断开连接');});
});server.listen(3000, () => {console.log('listening on *:3000');
});

前端代码

核心代码：

import io from 'socket.io-client'var socket = io('ws://localhost:3000')socket.on("sendToClient", data => {console.log(`收到了后端发来的数据：${data}`);records.value.push(JSON.parse(data))
})const sendMessage = () => {if (!message.value.trim()) returnconst record: IRecord = reactive({message: message.value,nickname,userId: new Date().getTime() + '',color: '',sendTime: getYMDHMS(new Date().getTime())})socket.emit('sendToServer', JSON.stringify(record));message.value = '';
}

完整代码：

<template><div class="chat-room"><div class="nav"></div><div class="main"><div class="title"><span>图灵聊天室（{{ userCount }}）</span></div><div class="content" ref="recordsContent"><div v-for="(itm, inx) in records" :key="inx"><divclass="item":class="[itm.nickname === nickname ? 'item' : 'item-other']"><div class="info">[ {{ itm.nickname }}：{{ itm.sendTime }} ]</div><span class="message">{{ itm.message }}</span></div></div></div><div class="input-box"><div class="text"><textarea :rows="8" v-model="message" @keydown="onKeydown"></textarea></div><div class="opt"><button ghost @click="sendMessage">发 送</button></div></div></div></div>
</template><script setup lang="ts">
import io from 'socket.io-client'
import { reactive, ref } from 'vue'interface IRecord {nickname: string,userId: string,color: string,message: string,sendTime: string
}
const userCount = ref(2)
const records = ref<IRecord[]>([])
const message = ref('')
const nickname = localStorage.getItem('username') || '匿名用户'var socket = io('ws://localhost:3000')socket.on("sendToClient", data => {console.log(`收到了后端发来的数据：${data}`);records.value.push(JSON.parse(data))
})const sendMessage = () => {if (!message.value.trim()) returnconst record: IRecord = reactive({message: message.value,nickname,userId: new Date().getTime() + '',color: '',sendTime: getYMDHMS(new Date().getTime())})socket.emit('sendToServer', JSON.stringify(record));message.value = '';
}const onKeydown = (event: any) => {if (event.keyCode === 13) {sendMessage()}
}function getYMDHMS(timestamp:number) {let time = new Date(timestamp)let year = time.getFullYear()let month:any = time.getMonth() + 1let date:any = time.getDate()let hours:any = time.getHours()let minute:any = time.getMinutes()let second:any = time.getSeconds()if (month < 10) { month = '0' + month }if (date < 10) { date = '0' + date }if (hours < 10) { hours = '0' + hours }if (minute < 10) { minute = '0' + minute }if (second < 10) { second = '0' + second }return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
}</script><style scoped lang="scss">
.chat-room {margin: 0px auto;width: 100%;height: 100vh;display: flex;flex-direction: row;border: 1px solid #ccc;overflow: hidden;.nav {width: 66px;background: #363636;flex-shrink: 0;}.main {display: flex;background: #efefef;flex: 1;width: 0;display: flex;flex-direction: column;.title {height: 60px;display: flex;align-items: center;font-size: 16px;font-weight: 700;padding-left: 20px;border-bottom: 1px solid #c3c3c3;flex-shrink: 0;}.content {flex: 1;height: 0px;position: relative;overflow-y: auto;padding: 10px;.item {text-align: right;.info {font-size: 14px;color: #666;}.message {font-size: 18px;background-color: rgba(110, 89, 228, 0.579);margin: 10px;padding: 8px 12px;border-radius: 8px;display: inline-block;color: #333;}}.item-other {text-align: left;.message {background-color: rgb(218, 197, 112);}}}.input-box {height: 230px;border-top: 1px solid #c3c3c3;flex-shrink: 0;display: flex;flex-direction: column;.text {flex: 1;textarea {width: 94%;height: 160px;font-size: 16px;resize: none;border: none;padding: 8px 24px;background: #efefef;&:focus {outline: none;}&:focus-visible {outline: none;}}}.opt {height: 60px;flex-shrink: 0;display: flex;align-items: center;justify-content: flex-end;padding-right: 20px;}}}
}
</style>