Socket.IO聊天室

项目代码  https://github.com/R-K05/Socket.IO-

创建项目

服务端项目和客户端项目

安装Socket依赖

服务端 npm i socket.io

客户端 npm i socket.io-client

客户端添加聊天页面

源码 

服务端 app.js

const express = require("express")
const app = express()const { Server } = require("socket.io");const io = new Server(3000, {cors: {// 解决客户端跨域 8080客户端运行端口origin: ["http://localhost:8080"]}
});const userList = []const onlineUsers = {}io.on("connection", (socket) => {const username = socket.handshake.query.usernameif(!username) returnconst userInfo = userList.find(user => username === user.username)if(userInfo){userInfo.id = socket.id}else{userList.push({username,id:socket.id})}io.emit("online",{userList})socket.on('send',({formUsername,targetId,msg}) =>{const toUser = userList.find(user => user.id === targetId)console.log(toUser);// 发送客户端io.to(targetId).emit('receive', { fromUsername: formUsername,toUsername:toUser.username,msg,dataTime:new Date().getTime()});})});app.listen(8000,() =>{console.log("ok");})

客户端 chattingView.vue

<template><div ><ul><template v-for="userinfo of state.userList" :key="userinfo.id"><li v-if="state.username ===userinfo.username ">{{ userinfo.username }}</li><li v-else><a href="javascript:;" @click="selectUser(userinfo)">{{ userinfo.username }}</a></li></template></ul><div v-if="state.targetUser"><h3 >{{ state.targetUser.username }}</h3><input type="text" v-model="state.msgText"><button @click="sendMsg">Send</button></div><div><ul><li v-for="(data,index) of messageList" :key="index"><p>{{ data.formUsername }}:{{ new Date(data.dataTime) }}</p><p>{{data.msg}}</p></li></ul></div></div>
</template><script setup>
import { io } from "socket.io-client";
import { useRouter } from "vue-router";
import { reactive,computed } from "vue";const rouetr = useRouter()const state = reactive({username:rouetr.currentRoute.value.query.username,userList:[],targetUser:null,msgText:'',msgBox:{}
})const messageList = computed(()=>{return (state.msgBox[state.username] && state.targetUser) ? state.msgBox[state.username].filter(item=>{return item.formUsername === state.username ||item.toUsername === state.username}) :[]
})const selectUser = (userinfo) =>{state.targetUser = userinfo}const sendMsg = () =>{if(!state.msgText.length) return;appendMsg({formUsername:state.username,toUsername:state.targetUser.name,msg:state.msgText,dataTime:new Date().getTime()})// 发送socket.emit('send',{formUsername:state.username,targetId:state.targetUser.id,msg:state.msgText})
}const socket = io('http://localhost:3000',{query:{username:state.username}
});socket.on('online',(data)=>{state.userList = data.userList})socket.on('receive',(data)=>{console.log("data===",data);appendMsg(data)})socket.on('error',(err)=>{})function  appendMsg(data) {!state.msgBox[state.username] && (state.msgBox[state.username] =[])state.msgBox[state.username].push(data)  
}
</script>

实现效果

xiaoshaofufu和xiaoningfufu之间通信

xiaoyexianseng 接收不到