|
6 | 6 | <title>Matching service: websocket test</title>
|
7 | 7 | </head>
|
8 | 8 | <body>
|
9 |
| - <p id="status">Status: no matching yet</p> |
10 |
| - <button onclick="openWebSocket()">Find match</button> |
11 |
| - <button onclick="closeConnection()">Cancel matching</button> |
12 |
| - <p id="response"></p> |
| 9 | + <p id="status1">Status (Conn 1): no matching yet</p> |
| 10 | + <button onclick="openWebSocket1()">Find match (Conn 1)</button> |
| 11 | + <button onclick="closeConnection1()">Cancel matching (Conn 1)</button> |
| 12 | + <p id="response1"></p> |
| 13 | + |
| 14 | + <p id="status2">Status (Conn 2): no matching yet</p> |
| 15 | + <button onclick="openWebSocket2()">Find match (Conn 2)</button> |
| 16 | + <button onclick="closeConnection2()">Cancel matching (Conn 2)</button> |
| 17 | + <p id="response2"></p> |
| 18 | + |
13 | 19 | <script>
|
14 |
| - let socket = null; |
| 20 | + let socket1 = null; |
| 21 | + let socket2 = null; |
15 | 22 |
|
16 | 23 | function generateRandomDetails() {
|
17 | 24 | const username = Math.random().toString(36).substring(2, 8); // Generates a random username
|
|
20 | 27 | return [username, `${username}@${domain}`];
|
21 | 28 | }
|
22 | 29 |
|
23 |
| - function openWebSocket() { |
24 |
| - // Connect to WebSocket server |
25 |
| - // User should be authenticated first |
26 |
| - // JWT token should be sent with the initial request, in the authorization header. |
27 |
| - // request would be checked as middleware. |
28 |
| - if (socket != null) return; |
29 |
| - socket = new WebSocket("ws://localhost:8081/match"); |
30 |
| - document.getElementById("response").innerText = ""; |
31 |
| - |
32 |
| - // Log connection opening |
33 |
| - socket.onopen = function () { |
34 |
| - console.log("WebSocket is open now."); |
| 30 | + function openWebSocket1() { |
| 31 | + if (socket1 != null) return; |
| 32 | + socket1 = new WebSocket("ws://localhost:8081/match"); |
| 33 | + document.getElementById("response1").innerText = ""; |
35 | 34 |
|
36 |
| - // Random email & username |
| 35 | + socket1.onopen = function () { |
| 36 | + console.log("WebSocket 1 is open now."); |
37 | 37 | const arr = generateRandomDetails();
|
38 |
| - |
39 |
| - // send the match request when connection is open |
40 |
| - socket.send( |
| 38 | + socket1.send( |
41 | 39 | JSON.stringify({
|
42 | 40 | type: "match_request",
|
43 | 41 | topics: ["Algorithms", "Arrays"],
|
44 | 42 | difficulties: ["Easy", "Medium"],
|
45 |
| - // username: "JohnDoe", // Uncomment for same user test for rejection |
46 |
| - username: arr[0], |
| 43 | + username: "Timothy", |
47 | 44 | })
|
48 | 45 | );
|
| 46 | + document.getElementById("status1").innerText = |
| 47 | + "Status (Conn 1): matching in progress..."; |
| 48 | + }; |
| 49 | + |
| 50 | + socket1.onmessage = function (event) { |
| 51 | + console.log("Message from Conn 1: " + event.data); |
| 52 | + document.getElementById("response1").innerText = |
| 53 | + "Received from Conn 1: " + event.data; |
| 54 | + document.getElementById("status1").innerText = |
| 55 | + "Status (Conn 1): matching found/timeout"; |
| 56 | + }; |
| 57 | + |
| 58 | + socket1.onerror = function (error) { |
| 59 | + console.log("WebSocket 1 error: " + error); |
| 60 | + }; |
| 61 | + |
| 62 | + socket1.onclose = function () { |
| 63 | + console.log("WebSocket 1 is closed now."); |
| 64 | + socket1 = null; |
| 65 | + }; |
| 66 | + } |
| 67 | + |
| 68 | + function closeConnection1() { |
| 69 | + document.getElementById("status1").innerText = |
| 70 | + "Status (Conn 1): matching cancelled"; |
| 71 | + document.getElementById("response1").innerText = ""; |
| 72 | + socket1.close(); |
| 73 | + } |
| 74 | + |
| 75 | + function openWebSocket2() { |
| 76 | + if (socket2 != null) return; |
| 77 | + socket2 = new WebSocket("ws://localhost:8081/match"); |
| 78 | + document.getElementById("response2").innerText = ""; |
49 | 79 |
|
50 |
| - document.getElementById("status").innerText = |
51 |
| - "Status: matching in progress..."; |
| 80 | + socket2.onopen = function () { |
| 81 | + console.log("WebSocket 2 is open now."); |
| 82 | + const arr = generateRandomDetails(); |
| 83 | + socket2.send( |
| 84 | + JSON.stringify({ |
| 85 | + type: "match_request", |
| 86 | + topics: ["Algorithms", "Graphs"], |
| 87 | + difficulties: ["Medium", "Hard"], |
| 88 | + username: "Jennie", |
| 89 | + }) |
| 90 | + ); |
| 91 | + document.getElementById("status2").innerText = |
| 92 | + "Status (Conn 2): matching in progress..."; |
52 | 93 | };
|
53 | 94 |
|
54 |
| - // Log response message and display it |
55 |
| - socket.onmessage = function (event) { |
56 |
| - console.log("Message received: " + event.data); |
57 |
| - document.getElementById("response").innerText = |
58 |
| - "Received: " + event.data; |
59 |
| - document.getElementById("status").innerText = |
60 |
| - "Status: matching found/timeout"; |
| 95 | + socket2.onmessage = function (event) { |
| 96 | + console.log("Message from Conn 2: " + event.data); |
| 97 | + document.getElementById("response2").innerText = |
| 98 | + "Received from Conn 2: " + event.data; |
| 99 | + document.getElementById("status2").innerText = |
| 100 | + "Status (Conn 2): matching found/timeout"; |
61 | 101 | };
|
62 | 102 |
|
63 |
| - // Log errors |
64 |
| - socket.onerror = function (error) { |
65 |
| - console.log("WebSocket error: " + error); |
| 103 | + socket2.onerror = function (error) { |
| 104 | + console.log("WebSocket 2 error: " + error); |
66 | 105 | };
|
67 | 106 |
|
68 |
| - // Log connection closure |
69 |
| - socket.onclose = function () { |
70 |
| - console.log("WebSocket is closed now."); |
71 |
| - socket = null; |
| 107 | + socket2.onclose = function () { |
| 108 | + console.log("WebSocket 2 is closed now."); |
| 109 | + socket2 = null; |
72 | 110 | };
|
73 | 111 | }
|
74 | 112 |
|
75 |
| - function closeConnection() { |
76 |
| - document.getElementById("status").innerText = |
77 |
| - "Status: matching cancelled"; |
78 |
| - document.getElementById("response").innerText = ""; |
79 |
| - socket.close(); |
| 113 | + function closeConnection2() { |
| 114 | + document.getElementById("status2").innerText = |
| 115 | + "Status (Conn 2): matching cancelled"; |
| 116 | + document.getElementById("response2").innerText = ""; |
| 117 | + socket2.close(); |
80 | 118 | }
|
81 | 119 | </script>
|
82 | 120 | </body>
|
|
0 commit comments