在本系列的上一篇文章「使用 JavaScript 和 Bun 的 WebSocket」中，我們探討如何初始化能夠處理 HTTP 請求和 WebSocket 連線的伺服器。
我們為 HTTP 請求定義了一條規則，以便在向 / 發出請求時提供 index.html 檔案。 index.html 檔案包含用於與 WebSocket 伺服器建立連線並作為客戶端傳送訊息的用戶端邏輯。
在「WebSocket with JavaScript and Bun」中解釋的伺服器的 fetch 方法中實作了以下程式碼：
if (url.pathname === "/")
return new Response(Bun.file("./index.html"));
這表示當瀏覽器要求 http://localhost:8080/ 時，index.html 檔案的內容將會傳送到瀏覽器。
HTML 將呈現一個帶有輸入文字和按鈕的簡單表單，並提供作為用戶端連接到 WebSocket 伺服器的邏輯。
<!doctype html>
<html>
<head>
<title>WebSocket with Bun and JavaScript</title>
<script>
let echo_service;
append = function (text) {
document
.getElementById("websocket_events")
.insertAdjacentHTML("beforeend", "<li>" + text + ";</li>");
};
window.onload = function () {
echo_service = new WebSocket("ws://127.0.0.1:8080/chat");
echo_service.onmessage = function (event) {
append(event.data);
};
echo_service.onopen = function () {
append("? Connected to WebSocket!");
};
echo_service.onclose = function () {
append("Connection closed");
};
echo_service.onerror = function () {
append("Error happens");
};
};
function sendMessage(event) {
console.log(event);
let message = document.getElementById("message").value;
echo_service.send(message);
}
</script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
/>
</head>
<body>
<main>
<h2>
Explaining the client code
</h2>
<p>This code creates a simple <strong>WebSocket client</strong> in a browser to interact with a WebSocket server. Here's a detailed explanation of its components:</p>
<hr>
<h3>
The HTML structure
</h3>
<pre class="brush:php;toolbar:false"><!doctype html>
<html>
<head>
<title>WebSocket with Bun and JavaScript</title>
</head>
<body>
<main>
<ul>
<li>The input field (<input>
<li>The submit button (<input type="button">): when clicked, it triggers the sendMessage(event) function to send the typed message to the server.
window.onload = function () {
echo_service = new WebSocket("ws://127.0.0.1:8080/chat");
...
};
WebSocket 用戶端有四個主要事件處理程序：
if (url.pathname === "/")
return new Response(Bun.file("./index.html"));
<!doctype html>
<html>
<head>
<title>WebSocket with Bun and JavaScript</title>
<script>
let echo_service;
append = function (text) {
document
.getElementById("websocket_events")
.insertAdjacentHTML("beforeend", "<li>" + text + ";</li>");
};
window.onload = function () {
echo_service = new WebSocket("ws://127.0.0.1:8080/chat");
echo_service.onmessage = function (event) {
append(event.data);
};
echo_service.onopen = function () {
append("? Connected to WebSocket!");
};
echo_service.onclose = function () {
append("Connection closed");
};
echo_service.onerror = function () {
append("Error happens");
};
};
function sendMessage(event) {
console.log(event);
let message = document.getElementById("message").value;
echo_service.send(message);
}
</script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
/>
</head>
<body>
<main>
<h2>
Explaining the client code
</h2>
<p>This code creates a simple <strong>WebSocket client</strong> in a browser to interact with a WebSocket server. Here's a detailed explanation of its components:</p>
<hr>
<h3>
The HTML structure
</h3>
<pre class="brush:php;toolbar:false"><!doctype html>
<html>
<head>
<title>WebSocket with Bun and JavaScript</title>
</head>
<body>
<main>
<ul>
<li>The input field (<input>
<li>The submit button (<input type="button">): when clicked, it triggers the sendMessage(event) function to send the typed message to the server.window.onload = function () {
echo_service = new WebSocket("ws://127.0.0.1:8080/chat");
...
};
echo_service.onopen = function () {
append("? Connected to WebSocket!");
};
echo_service.onmessage = function (event) {
append(event.data);
};
echo_service.onclose = function () {
append("Connection closed");
};
echo_service.onerror = function () {
append("Error happens");
};
此實用函數將 WebSocket 事件和訊息加入
insertAdjacentHTML("beforeend", "
function sendMessage(event) {
let message = document.getElementById("message").value;
echo_service.send(message);
}
PicoCSS 為頁面提供了輕量級且優雅的樣式，確保表單和活動日誌看起來優美，無需額外的自訂 CSS。
本文探討如何實作 WebSocket 用戶端與 WebSocket 伺服器通訊。在本系列的上一篇文章中，我們重點介紹了建立基本的 WebSocket 伺服器。
在下一篇文章中，我們將透過實作廣播邏輯來進一步探索 WebSocket 功能。此功能允許將來自一個客戶端的消息轉發到所有連接的客戶端，這對於建立聊天系統、協作工具或即時通知等即時應用程式至關重要。
敬請期待！
以上是使用 JavaScript 的 WebSocket 用戶端的詳細內容。更多資訊請關注PHP中文網其他相關文章！
