websocket协议
Webscoket是Web浏览器和服务器之间的一种全双工通信协议 ,其中WebSocket协议由IETF定为标准,WebSocket API由W3C定为标准。 一旦Web客户端与服务器建立起连接,之后的全部数据通信都通过这个连接进行。 通信过程中,可互相发送JSON、XML、HTML或图片等任意格式的数据。
我们将基于这个协议,实现聊天室的功能
下载ws模块
npm i ws
node服务端代码
const WebSocket = require("ws")
const { WebSocketServer } = require("ws")
const wss = new WebSocketServer({ port: 8080 });
wss.on('connection', function connection(ws) {
ws.on('error', console.error);
ws.on('message', function message(data, isBinary) {
wss.clients.forEach(function each(client) {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(data, { binary: isBinary });
}
});
});
ws.send("欢迎进入聊天室")
});
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>聊天室</h1>
<script>
var ws = new WebSocket("ws://localhost:8080")
ws.onopen = ()=>{
console.log("连接成功")
}
ws.onmessage = (msgObj)=>{
console.log(msgObj.data)
}
ws.onerror = ()=>{
console.log("error")
}
</script>
</body>
</html>
测试
打开两个前端页面(客户端),在一个客户端控制台输入ws.send(“hello”)
在另一个客户端的控制台就能收到hello这个消息了,
这里其实已经相当一个群聊功能了,只是聊天的用户都是互相不知道的,接下来作者会使用登录验证,让所有用户能够彼此能够认识
让我们实现私聊功能吧!!