北京旅游网站排名,saas 做网站,上海软件外包公司排名,房管局官网appnodejs编写ws服务是非常简单高效的#xff0c;nodejs有众多的实现ws的库#xff0c;如ws,SocketIO等#xff0c;nodejs的事件线程是单线程的#xff0c;所以不要在事件线程内做阻塞性的操作#xff0c;耗时的操作交给工作线程或者子进程操作。
我使用nodejsvue3实现了写了…nodejs编写ws服务是非常简单高效的nodejs有众多的实现ws的库如ws,SocketIO等nodejs的事件线程是单线程的所以不要在事件线程内做阻塞性的操作耗时的操作交给工作线程或者子进程操作。
我使用nodejsvue3实现了写了个简单的聊天室demo
1.nodejs服务端代码
node init初始化项目 安装ts 具体可以看我nodejs 使用ts的文章 安装ws的库
npm install ws
npm install types/wsimport {WebSocketServer,WebSocket} from ws;const wss new WebSocketServer( {port:3000});wss.on(connection,(ws){console.info(new connection join,ws);ws.on(message,(data){wss.clients.forEach((client{if (client.readyState WebSocket.OPEN) {client.send(data,{binary:false});}}))console.info(get msg from client,(new String(data)).toString());})});console.log(start success);2. vue3连接客户端
使用游览器自带的WebSocket对象连接ws服务使用ws库的WebSocket对象在游览器运行时会报错存在一定的问题
script setup langts
import { onMounted, ref } from vue
import { Msg } from /modelconst propsdefineProps{username: string
}();const toSendMsg ref();const usernameprops.username;const receiveMsgList refMsg[]([])const ws new WebSocket(ws://localhost:3000);onMounted(() {// WebSocket 服务器的 URLconst wsUrl ws://localhost:3000;// 创建 WebSocket 连接
const ws new WebSocket(wsUrl);// 监听连接成功事件
ws.addEventListener(open, function () {console.log(Connected to WebSocket server);// 发送消息给服务器
});// 监听接收到消息事件
ws.addEventListener(message, function (event) {console.log(Blob content as string:, event.data);receiveMsgList.value.push(JSON.parse(event.data))});// 监听连接关闭事件
ws.addEventListener(close, function () {console.log(Disconnected from WebSocket server);
});// 监听连接错误事件
ws.addEventListener(error, function (error) {console.error(WebSocket error:, error);
});
})function sendMsg(){const msgInfo new Msg(username,toSendMsg.value)ws.send(JSON.stringify(msgInfo));toSendMsg.value;
}/scripttemplateel-col :span6div classchart-out-boxdiv classchart-room-headel-scrollbar height400pxdiv v-for(item, index) in receiveMsgList :keyindexp v-ifitem.username username classscrollbar-demo-item scrollbar-demo-is-own{{item.content}}span{{ :username }}/span/pp v-else classscrollbar-demo-item scrollbar-demo-is-otherspan{{item.username}}:/span{{ item.content }}/p/div/el-scrollbar/divdiv classchart-room-footerel-input v-modeltoSendMsg stylewidth: 240px :rows4 typetextarea placeholderPlease input /el-button typesuccess stylemargin-left:20px clicksendMsg发送/el-button/div/div/el-col/templatestyle langscss scoped
.chart-out-box {border: 1px solid blue;height: 400px;
}.chart-room-head {height: 70%;border: 1px solid green;;
}.chart-room-footer {}.scrollbar-demo-item {display: flex;align-items: center;height: 50px;margin: 10px;text-align: center;border-radius: 4px;background: var(--el-color-primary-light-9);color: var(--el-color-primary);
}.scrollbar-demo-is-own {justify-content: right;
}.scrollbar-demo-is-other {justify-content: left;
}/style
3.演示 4.git代码
https://github.com/haozhi-ly/chatroom-demo
