zoukankan      html  css  js  c++  java
  • 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>

    码字不易,如有帮助,请支持!

  • 相关阅读:
    struts2简介
    项目整合SpringDataRedis
    SpringDataRedis入门Demo
    包管理-rpm
    文件查找与压缩
    N042第一周
    Shell
    Linux下终端字体颜色设置方法
    文本处理工具作业
    正则表达式
  • 原文地址:https://www.cnblogs.com/-roc/p/12077311.html
Copyright © 2011-2022 走看看