ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript を使用した WebSocket クライアント

JavaScript を使用した WebSocket クライアント

Linda Hamiltonオリジナル: 2024-12-03 00:33:11521ブラウズ

WebSocket Client with JavaScript

このシリーズの前の記事「JavaScript と Bun を使用した WebSocket」では、HTTP リクエストと WebSocket 接続の両方を処理できるサーバーを初期化する方法を検討しました。

/ に対してリクエストが行われたときに、index.html ファイルを処理する HTTP リクエストのルールを定義しました。 Index.html ファイルには、WebSocket サーバーとの接続を確立し、クライアントとしてメッセージを送信するためのクライアント側のロジックが含まれています。

クライアントコード

「JavaScript と Bun を使用した WebSocket」で説明したサーバーの 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.

The messages/events log (

The JavaScript logic

Initializing the WebSocket connection

window.onload = function () {
    echo_service = new WebSocket("ws://127.0.0.1:8080/chat");
    ...
};

WebSocket("ws://127.0.0.1:8080/chat"): ポート 8080 の 127.0.0.1 でサーバー、具体的には /chat エンドポイントへの新しい WebSocket 接続を作成します。
変数 echo_service は、サーバーとの通信を容易にする WebSocket インスタンスを保持します。

WebSocket イベントの処理

WebSocket クライアントには 4 つの主要なイベントハンドラーがあります。

onopen (接続が確立されています)

  if (url.pathname === "/") 
    return new Response(Bun.file("./index.html"));

サーバーへの接続が正常に確立されると、onopen 関数がトリガーされます。
「? WebSocket に接続されました!」というメッセージがログに追加されます。

onmessage (メッセージを受信)

<!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.

The messages/events log (

JavaScript css html for Error Logging using Event append function this input ul li http websocket issue

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Three.js の最適化: テクニック次の記事：Three.js の最適化: テクニック

続きを見る

JavaScript を使用した WebSocket クライアント

クライアントコード

The JavaScript logic

Initializing the WebSocket connection

WebSocket イベントの処理

The JavaScript logic

Initializing the WebSocket connection

サーバーへのメッセージの送信

イベントのログ記録

PicoCSS を使用したスタイリング

概要とその仕組み

次のステップ

関連記事