WebSocket测试前端-交易私聊及订单提醒

Inetgeek · Oct 5, 2022 · a25fe0f · a25fe0f
1 parent 65c9e84
commit a25fe0f
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 0 deletions.
diff --git a/ws_frontend/.idea/.gitignore b/ws_frontend/.idea/.gitignore
diff --git a/ws_frontend/.idea/jsLibraryMappings.xml b/ws_frontend/.idea/jsLibraryMappings.xml
diff --git a/ws_frontend/.idea/modules.xml b/ws_frontend/.idea/modules.xml
diff --git a/ws_frontend/.idea/ws_frontend.iml b/ws_frontend/.idea/ws_frontend.iml
diff --git a/ws_frontend/chat.html b/ws_frontend/chat.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+我的id: <input type="text" id="myId"><button onclick="link()">连接服务器</button><br>
+<hr>
+目标id: <input type="text" id="toId"><br>
+内容: <input type="text" id="content">
+<input type="button" value="发送" onclick="send()"><br>
+<hr>
+收到消息: <div id="msg"></div>
+
+</body>
+<script>
+    var ws;
+    function link() {
+        if (ws != null) {
+            ws.close();
+            ws=null;
+        }
+        var myId = document.getElementById("myId").value;
+        ws=new WebSocket('ws://localhost:8080/api/v1/ws/chat/'+myId);
+        ws.onmessage=function (msg) {
+            var data=msg.data;
+            console.log(data);
+            var old=document.getElementById("msg").innerHTML
+            document.getElementById("msg").innerHTML=old+"<br>"+msg.data;
+        };
+        ws.onopen=function (ev) {
+            console.log("服务器连接成功...")
+        };
+    }
+    function send(){
+        var myId=document.getElementById("myId").value;
+        var toId=document.getElementById("toId").value;
+        var content=document.getElementById("content").value;
+        ws.send(myId+'@'+toId+"@"+content);
+    }
+</script>
+</html>
diff --git a/ws_frontend/notice.html b/ws_frontend/notice.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+消息展示区:<br/>
+<div id="textArea"></div>
+
+</body>
+<script>
+    var textArea = document.getElementById('textArea');
+
+
+    var websocket = null;
+    //如果浏览器支持websocket就建立一个websocket，否则提示浏览器不支持websocket
+    if('websocket' in window){
+        websocketPage = new WebSocket('ws://localhost:8080//api/v1/ws/notice/20220921112424');
+    }else{
+        alert('浏览器不支持websocket!');
+    }
+    //建立websocket时自动调用
+    websocketPage.onopen = function (event) {
+        console.log('建立连接');
+    }
+    //关闭webscoket时自动调用
+    websocketPage.oncolse = function (event){
+        console.log('关闭连接');
+    }
+    //websocket接收到消息时调用
+    websocketPage.onmessage = function (event){
+        //将接收到的消息展示在消息展示区
+        textArea.innerText += event.data;
+        textArea.innerHTML += "<br/>";
+    }
+    //websocket出错自动调用
+    websocketPage.onerror = function () {
+        alert('websocket出错');
+    }
+    //关闭窗口前关闭websocket连接
+    window.onbeforeunload = function (){
+        websocketPage.close();
+    }
+
+</script>
+</html>