建设网站合同范本,电商平台网站开发过程,设计师网名怎么取,企业开发网站公司项目代码 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()co…项目代码 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
templatediv ultemplate v-foruserinfo of state.userList :keyuserinfo.idli v-ifstate.username userinfo.username {{ userinfo.username }}/lili v-elsea hrefjavascript:; clickselectUser(userinfo){{ userinfo.username }}/a/li/template/uldiv v-ifstate.targetUserh3 {{ state.targetUser.username }}/h3input typetext v-modelstate.msgTextbutton clicksendMsgSend/button/divdivulli v-for(data,index) of messageList :keyindexp{{ data.formUsername }}:{{ new Date(data.dataTime) }}/pp{{data.msg}}/p/li/ul/div/div
/templatescript 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 接收不到
