From 7683831186e7a985bae2e03c4c067cdbd1e16e29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E5=B0=8F=E5=A2=A8?=
 <2291200076@qq.com>
Date: Sat, 29 Jul 2023 22:01:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20websocket=20client(browser?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tools/client/websocket.test.html | 67 ++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 tools/client/websocket.test.html
diff --git a/tools/client/websocket.test.html b/tools/client/websocket.test.html
new file mode 100644
index 0000000..e28175d
--- /dev/null
+++ b/tools/client/websocket.test.html
@@ -0,0 +1,67 @@
+<!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>
+</head>
+
+<body>
+    <script>
+
+        let wsInstance = null
+        function createNewConn() {
+            let ws = new WebSocket('ws://localhost:8080/v2/ws')
+            // readyState返回当前实例对象的当前状态
+            /*
+              共有四种状态
+              CONNECTING: 值为0，表示正在连接
+              OPEN:  值为1，表示连接成功，可以通信了
+              CLOSING 值为2， 表示连接正在关闭
+              CLOSED 值为3，表示连接已经关闭了，或者打开连接失败
+            */
+
+            // 实例对象的onopen属性，用于指定连接成功后的回调函数
+            ws.onopen = (res) => {
+                console.log('onopen readyState', ws.readyState)
+                console.log('onopen 连接成功==========>', res)
+            }
+
+            // 实例对象的onmessage属性，用于指定收到服务器数据后的回调函数
+            ws.onmessage = ({ data }) => {
+                console.log('onmessage readyState', ws.readyState)
+                // 注意此时的data是json格式的 需要转化下
+                console.log('onmessage 有新消息啦=======>', JSON.parse(data))
+                // 实例对象的send方法给服务器发送消息
+                ws.send('客户端发送的消息')
+            }
+
+            // 实例对象的onclose属性，用于连接关闭后的回调 函数
+            // 当关闭了服务器后 会走到此回调函数
+            ws.onclose = () => {
+                console.log('onclose readyState', ws.readyState)
+                console.log('onclose websocket连接关闭=======>')
+                setTimeout(() => {
+                    wsInstance = createNewConn()
+                }, 3000)
+            }
+
+            // 连接发生错误的回调方法
+            // 如当服务器没有启动 就会走到这个错误回调
+            ws.onerror = (error) => {
+                console.log('onerror readyState', ws.readyState)
+                console.log('onerror 发生错误==========>', error)
+            }
+            return ws
+        }
+
+        // 创建webscoket 对象 地址填入本地ip 端口是在搭建websocket服务器定义的端口
+        wsInstance = createNewConn()
+        // 执行上面的语句之后，客户端就会与服务器进行连接
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
