websocket通信案例

HTML5 WebSocket

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>websocket通信dome</title>
  <style>
    .main{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: cornsilk;
      padding: 30px;
      padding: 30px;
    }
    .top{
      width: 400px;
      padding: 30px;
      background-color: burlywood;
    }
    .bottom{
      width: 400px;
      background-color: cadetblue;
      padding: 30px;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="top">
      <div style="padding-bottom: 20px;">
        <span>输入内容：</span>
        <input type="text" id="sendText">
      </div>
      <div>
        <button id="send">发送</button>
        &emsp;
        &emsp;
        &emsp;
        <button id="reset">重置</button>
      </div>
    </div>
    <div class="bottom">
      <textarea name="" id="text" cols="50" rows="30"></textarea>
    </div>
  </div>
</body>
<script>
  var ws = null; //WebSocket 链接
  var url = "ws://127.0.0.1:9999"; //本地node运行的服务器  ip地址加端口号
  // 本地node运行服务器的命令(需要在node文件下运行黑窗口) : node webSocket.js

  var send = document.getElementById('send'); //发送按钮
  var reset = document.getElementById('reset'); //重置按钮
  var textaa = document.getElementById('text'); //显示文本的框
  var sendText = document.getElementById('sendText'); //需要发送的文本


  function open(){ //打开链接
    if("WebSocket" in window){ //检查当前浏览器是否支持websocket
      if(ws){ //判断是否已链接
        ws.close();
        ws = null;
      }
      //打开一个websocket
      ws = new WebSocket(url);
      ws.onopen = function(evt){
        sendMain(); //执行发送指令
      };
      ws.onmessage = function (evt){ //接收到信息--把信息添加到接收记录中并关闭链接
        console.log('信息--',evt)
        textaa.value = textaa.value+"\n "+evt.data;
        send.disabled = false;
        ws.close();
        ws = null;
      }
    }else{
      textaa.value = textaa.value+"\n 您的浏览器不支持WebSocket";
    }
  }

  function sendMain(){  //发送数据
    send.disabled = true; //先禁用按钮，防止连续触发造成链接错误
    ws.send(sendText.value); //使用连接发送数据
  }

  function resetMain(){ //重置链接
    if(ws){
      ws.close(); //关闭通信
      ws = null;
    }
    textaa.value = textaa.value + "\n 重置链接成功";
    send.disabled = false;
  }

  send.onclick = function () { open(); }
  reset.onclick = function () { resetMain(); }
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

效果

在这里插入图片描述

相关阅读:
[附源码]Python计算机毕业设计SSM久宠宠物店管理系统（程序+LW)
夏季，糖友需要注意些什么
【LeetCode热题100】--226.翻转二叉树
嵌入式C++总结
SQL39道代码练习题
binary_cross_entropy_with_logits 和 binary_cross_entropy 的区别
[100天算法】-键值映射（day 42）
【Linux】---环境变量
GDPU 数据结构天码行空8
基于OpenVINOTM开发套件“无缝”部署PaddleNLP模型

原文地址：https://blog.csdn.net/weixin_45846241/article/details/127772946