websocket ,可以实现客户端与服务器的即时通讯,比如即时聊天,获取项目中的消息提醒等(小铃铛上的标红数字提醒)
话不多说,上马奔腾,走起
只写demo,不在项目中使用:
1、初始化项目,
npm init -y
2、安装websocket
https://github.com/websockets/ws
npm install --save ws
3、服务端
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 6666 });
server.on('connection',(client) => {
client.on('message', (message)=> {
console.log( '客户端发送的消息:',message )
server.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
4、客户端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>即时聊天</title> </head> <body> <Input type="text" id="txt"></Input> <button id="btn">发送</button> <ul id="list"></ul> </body> </html> <script> let client = new WebSocket('ws://127.0.0.1:9000'); client.onopen = () => { // 打开时触发 // client.send("发送给服务端"); }; client.onmessage = (data) => { // 接收到服务端的信息 let str = `<li>${data.data}</li>`; list.innerHTML += str; }; client.onclose = (params) => { // 关闭时触发 console.log("close client"); }; client.onerror = (error) => { // 出错时触发 console.log(error); }; function sendMess() { client.send(txt.value) txt.value = ''; console.log( client.bufferedAmount ) // 共有多少内容 } btn.onclick = () => { // 点击时 sendMess() } document.onkeydown = (event)=>{ // 按下enter时 var e = event || window.event; if(e && e.keyCode == 13){ // enter 键 sendMess() } } </script>
码字不易,如有帮助,请支持!