php_group
/
htdoc


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
							<!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>Document</title>
 
    <style>
      div {
        width: 200px;
        height: 400px;
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <!-- 显示内容 -->
    <div></div>
    <!-- 输入内容 -->
    <input type="text" placeholder="请输入要发送的内容" />
    <!-- 发送按钮 -->
    <button>发送</button>
 
    <script>
      var input = document.querySelector("input");
      var button = document.querySelector("button");
      var div = document.querySelector("div");
 
      // 1、创建websocket
      // 参数：websocket的服务地址
      var socket = new WebSocket("ws://localhost:3000");
      // 2、open：当和websocket的服务器连接成功时触发
      socket.addEventListener("open", () => {
        div.innerHTML = "服务器连接成功了！";
      });
      // 3、 send：发送数据给服务器
      button.addEventListener("click", () => {
        var value = input.value;
        var data  = JSON.stringify({value:value})
        socket.send(data);
        console.log(value);
      });
      // 4、message：接收服务器数据
      socket.addEventListener("message", (e) => {
        div.innerHTML =div.innerHTML+"<br>"+JSON.parse(e.data).value;
      });
    </script>
  </body>
</html>