前端基于js实现webscoket的demo

最新推荐文章于 2024-04-22 09:48:52 发布

原创最新推荐文章于 2024-04-22 09:48:52 发布 · 936 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #javascript

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

客户端

<!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);
  });
}