前端基于js实现webscoket的demo

    本文介绍了一个使用WebSocket实现的简单客户端与服务端交互的例子。客户端通过JavaScript建立连接,并发送消息给服务端;服务端接收并响应这些消息,同时也会主动发送消息到客户端。

    摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    客户端

    <!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>
    
        <input id='input' type="text">
        <button onclick="send()">发送</button>
        <div id='id'>
    
        </div>
        <script>
    
            function socketConnect(url) {
                const id = document.getElementById('id')
                // 客户端与服务器进行连接
                let ws = new WebSocket(url); // 返回`WebSocket`对象,赋值给变量ws
                // 连接成功回调
                ws.onopen = e => {
                    console.log('连接成功', e)
                    ws.send('我发送消息给服务端'); // 客户端与服务器端通信
                }
                // 监听服务器端返回的信息
                ws.onmessage = e => {
                    console.log('服务器端返回:', e.data)
                    // do something
                    id.innerHTML = e.data
    
                }
                return ws; // 返回websocket对象
            }
            let wsValue = socketConnect('ws://10.0.132.217:8080');
    
            function send() {
                const id = document.getElementById("input")
                console.log(id.value)
                wsValue.send(id.value)
            }
        </script>
    </body>
    
    </html>
    

    服务端

    let ws = require("ws");
    let service = new ws.Server({
      host: "10.0.132.217",
      port: 8080,
    });
    
    service.on("connection", websocketAddListerner);
    
    let count = 0;
    function websocketAddListerner(wsOBJ) {
      //监听服务端收到消息
      wsOBJ.on("message", function (data) {
        console.log("request data:" + data);
        count++;
        setTimeout(() => {
          wsOBJ.send("别老找我聊天" + count);
        }, 1000);
      });
    
      //服务端给客户端发送消息
      wsOBJ.send("客户端接收");
    
      //监听服务端断开连接
      wsOBJ.on("close", function () {
        console.log("request close");
      });
      //监听error
      wsOBJ.on("error", function (err) {
        console.log("request error", err);
      });
    }
    
    

    登录后您可以享受以下权益:

    ×
    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值
    程序员都在用的中文IT技术交流社区

    程序员都在用的中文IT技术交流社区

    专业的中文 IT 技术社区,与千万技术人共成长

    专业的中文 IT 技术社区,与千万技术人共成长

    关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

    关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

    客服 返回顶部