首先WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。如果还不了解WebSocket的请移步 HTML5 WebSocket
在以前&＃xff0c;我们处理点对点通信都只能使用轮询&＃xff0c;原因是服务器不能主动向客户端发送信息。有了websocket&＃xff0c;使得我们的点对点通信变得了更简单和更加高效。
废话不多说&＃xff0c;这届上代码&＃xff1a;
服务端app.js
const koa &＃61; require(&＃39;koa&＃39;)
const router &＃61; require(&＃39;koa-router&＃39;)()
const websocket &＃61; require(&＃39;koa-websocket&＃39;)
const app &＃61; websocket(new koa())
let wsObj &＃61; {}
router.all(&＃39;/koa/ws&＃39;, (ctx) &＃61;> {const { id } &＃61; ctx.querywsObj[id] &＃61; ctx;ctx.websocket.send(&＃39;连接成功&＃39;);ctx.websocket.on(&＃39;message&＃39;, function(message) {console.log(message);const uid &＃61; JSON.parse(message).uId;if(!wsObj[uid]){ctx.websocket.send(&＃96;${uid}未上线&＃96;)}else{wsObj[uid].websocket.send(message)}});
})
app.ws.use(router.routes()).use(router.allowedMethods())
app.listen(3000, () &＃61;>console.log(&＃39;服务启动成功&＃39;)
)
客户端调用index.js
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><title>koa-websocket点对点通信title>
head><body><div id&＃61;"loginDiv"style&＃61;"position: absolute;width:400px;height:200px;left:50%;top:50%;margin-left:-200px;margin-top:-100px;"><div><label for&＃61;"nameInput">连接的id(自己的id)label><input type&＃61;"text" id&＃61;"nameInput" placeholder&＃61;"请输入您的ID" /><input type&＃61;"button" value&＃61;"连接" id&＃61;"certainInput" onclick&＃61;"ws()" />div><div><label for&＃61;"senid">给谁发送label><input type&＃61;"text" placeholder&＃61;"发送到的id" id&＃61;"sendId">div><div><label for&＃61;"sendContent">发送的内容label><input type&＃61;"text" placeholder&＃61;"发送的内容" id&＃61;&＃39;sendContent&＃39;><input type&＃61;"button" value&＃61;"发送" onclick&＃61;"send()">div>div>
body>
<script type&＃61;"text/Javascript">var webs &＃61; null; var mId &＃61; null; function ws() {mId &＃61; document.getElementById(&＃39;nameInput&＃39;).value;webs &＃61; new WebSocket(&＃39;ws://localhost:3000/koa/ws?id&＃61;&＃39; &＃43; mId)webs.onopen &＃61; function () {console.log(&＃39;连接成功&＃39;)}webs.onmessage &＃61; function (evt) {console.log(evt)}}function send() {var id &＃61; document.getElementById(&＃39;sendId&＃39;).value;var content &＃61; document.getElementById(&＃39;sendContent&＃39;).value;var data &＃61; {mId: mId,uId: id,content: content}webs.send(JSON.stringify(data))}script>html>
效果
111用户
000用户
京公网安备 11010802041100号