websocket 浅学

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>

 

 

码字不易，如有帮助，请支持！

posted @ 2019-12-21 16:34  王希有  阅读(231)  评论(1)  编辑  收藏  举报