在本系列的上一篇文章“使用 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中文网其他相关文章！
