websocket基础

最新推荐文章于 2025-03-27 15:48:57 发布

原创最新推荐文章于 2025-03-27 15:48:57 发布 · 203 阅读

CC 4.0 BY-SA版权

本文介绍了一个简单的WebSocket通讯示例，包括前端与后端的实现代码。前端通过HTML和JavaScript搭建了用户交互界面，并实现了与WebSocket服务器的数据收发；后端使用Node.js与ws模块创建WebSocket服务器，处理客户端发来的消息。

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

1.简单通讯

<body>
    <div>
        <input type="text" id="input">
        <button id="btn">发送</button>
        <button id="close">关闭</button>
        <div id="box">

        </div>
    </div>
</body>

<script>
    //链接后台的websocket服务

    var ws = new WebSocket("ws://127.0.0.1:1596");
    //var ws = new WebSocket("ws://127.0.0.1:1596");

     ws.onopen=function(){
        console.log("链接成功！");
     }

    document.querySelector("#btn").onclick=function(){
       var val = document.querySelector('#input').value;
       if (!val.trim()) {
        return
       };
       ws.send(val);
       document.querySelector('#input').value="";
    }

    ws.onmessage=function(val){
       //console.log(val.data)
       var node = document.createTextNode(val.data)
       document.getElementById("box").appendChild(node);
    }


    document.querySelector("#close").onclick=function(){
      ws.close();
    }

    ws.onclose = ()=>{
        console.log("88");
     }
</script>

js代码：

var ws = require('ws');

var socket = ws.Server;

var oj8k = new socket({port:1596});

oj8k.on('connection',function (ws) {
    console.log("websocket ok")
    ws.on('message',function (value) {
        ws.send(value);
    })
})

条件：cnpm init和cnpm i --save ws

1）服务器端先建立一个websocket的端口连接（js代码的前三行）

2）客服端来连接这个端口（不知道这个说法准不准确），并且onopen事件表示连接成功

3）客户端send（）发送数据，后台on("message"，func(ws){})捕获（前提是connection成功），捕获到并send发到客服端

4）客服端又onmessage事件来捕获服务器端发来的值