WebSocket使用方法
前端使用方法
- 利用WebSocket建立一個WebSocket對象
- 通過監聽該對象的 onopen, onmessage方法，實現數據的交互，處理後端傳來的信息
<!--- Game1 --->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<h1>Gamer 1</h1>
<button id="buildBtn">Build</button>
<input type="text" id="message" />
<button id="sendBtn">Send</button>
<button id="close">Close</button>
<script>
window.onload = function() {
var build = document.getElementById("buildBtn");
var send = document.getElementById("sendBtn");
var close = document.getElementById("close");
build.addEventListener("click", () => {
const socket = new WebSocket("ws://127.0.0.1:8001");
socket.onopen = () => {
console.log("socket is on server");
socket.send(JSON.stringify({ user: "game1", message: "" }));
};
socket.onmessage = function(e) {
console.log("message=", e);
const div = document.createElement("div");
div.innerText = e.data;
document.body.append(div);
};
if (socket.readyState === WebSocket.OPEN) socket.onopen();
window.s = socket;
});
send.addEventListener("click", () => {
var $input = document.getElementById("message");
if (window.s && window.s.readyState === WebSocket.OPEN) {
var socket = window.s;
socket.send(
JSON.stringify({
user: "game1",
message: $input.value,
to: "game2"
})
);
} else {
alert("沒有WebSocket連接");
}
});
close.addEventListener("click", () => {
if (window.s && window.s.readyState === WebSocket.OPEN) {
window.s.close(1000, JSON.stringify({ user: "game1" }));
window.s = null;
}
});
};
</script>
</body>
</html>
後端模擬
- 使用nodejs-websocket 進行模擬
具體使用nodejs創建一個websocket的過程可以參考websocket探祕
主要需要配置的頭信息包括
- connection: Upgrade -> 連接信息必須設置爲升級類型
- Upgrade: websocket -> 升級類型爲websocket
- Sec-WebSocket-Accept: 該值通過瀏覽器發送的websocket請求頭和後端生成的GUID標識共同生成
var ws = require("nodejs-websocket");
var connectionMap = {};
// Scream server example: "hi" -> "HI!!!"
var server = ws
.createServer(function(conn) {
console.log("New connection");
getConnections();
// 獲取文本
conn.on("text", function(str) {
console.log("Received message");
const receiveData = JSON.parse(str);
const { user, message, to } = receiveData;
console.log(receiveData);
if (!connectionMap[user]) {
connectionMap[user] = conn;
return;
}
if (connectionMap[to]) {
const toUser = connectionMap[to];
toUser.sendText(message);
} else {
console.log("用戶未上線");
}
// conn.sendText();
});
conn.on("close", function(code, reason) {
const { user } = JSON.parse(reason);
delete connectionMap[user];
console.log("Connection closed");
});
})
.listen(8001, "127.0.0.1", () => {
console.log("server is on ws://127.0.0.1:8001");
});
function getConnections() {
console.log(server.connections);
}