찾다

집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript를 사용한 WebSocket 클라이언트

JavaScript를 사용한 WebSocket 클라이언트

Linda Hamilton
Linda Hamilton원래의
2024-12-03 00:33:11525검색

WebSocket Client with JavaScript

이 시리즈의 이전 기사 "JavaScript와 Bun이 포함된 WebSocket"에서는 HTTP 요청과 WebSocket 연결을 모두 처리할 수 있는 서버를 초기화하는 방법을 살펴보았습니다.

/에 대한 요청이 있을 때 index.html 파일을 제공하도록 HTTP 요청에 대한 규칙을 정의했습니다. index.html 파일에는 WebSocket 서버와의 연결을 설정하고 클라이언트로서 메시지를 보내기 위한 클라이언트 측 로직이 포함되어 있습니다.

클라이언트 코드

"JavaScript 및 Bun이 포함된 WebSocket"에 설명된 서버의 가져오기 메서드에서 다음 코드가 구현됩니다.

  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, 특히 /chat 엔드포인트에서 127.0.0.1의 서버에 대한 새 WebSocket 연결을 생성합니다.
      • echo_service 변수는 서버와의 통신을 용이하게 하는 WebSocket 인스턴스를 보유합니다.

      WebSocket 이벤트 처리

      WebSocket 클라이언트에는 4개의 주요 이벤트 핸들러가 있습니다.

      1. onopen (연결이 설정되었습니다) 
        if (url.pathname === "/") 
    return new Response(Bun.file("./index.html"));
      • 서버 연결이 성공적으로 이루어지면 onopen 함수가 실행됩니다.
      • 로그에 "? Connected to WebSocket!"이라는 메시지를 추가합니다.
      1. 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 (

      The JavaScript logic

      Initializing the WebSocket connection 

      window.onload = function () {
    echo_service = new WebSocket("ws://127.0.0.1:8080/chat");
    ...
};
      • onmessage 함수는 서버로부터 메시지가 수신될 때마다 실행됩니다.
      • 추가 기능을 사용하여 서버의 메시지(event.data)를 이벤트 로그에 추가합니다.
      1. onclose (연결이 닫혔습니다) 
         echo_service.onopen = function () {
       append("? Connected to WebSocket!");
   };
      • onclose 함수는 서버에 대한 연결이 닫힐 때(예: 서버 연결 끊김) 트리거됩니다.
      • 이 기능은 이벤트 로그에 "연결이 닫혔습니다"를 추가합니다.
      1. onerror (오류가 발생했습니다) 
         echo_service.onmessage = function (event) {
       append(event.data);
   };
      • 통신 중 오류가 발생하면 onerror 기능이 실행됩니다.
      • 이 기능은 문제를 나타내기 위해 "오류 발생"을 기록합니다.

      서버에 메시지 보내기 

         echo_service.onclose = function () {
       append("Connection closed");
   };
      • "제출" 버튼을 클릭하면 sendMessage 함수가 호출됩니다.
      • document.getElementById("message").value: 사용자가 입력 상자에 입력한 텍스트를 검색합니다.
      • echo_service.send(message): 사용자의 메시지를 WebSocket 서버로 보냅니다.

      이벤트 로깅 

         echo_service.onerror = function () {
       append("Error happens");
   };

      • 이 유틸리티 함수는 WebSocket 이벤트와 메시지를

          목록(id="websocket_events").

        • insertAdjacentHTML("beforeend", "

        • " text ";
          • "): 주어진 텍스트를 목록 끝에 새 목록 항목(
        • )으로 삽입합니다. .

          • PicoCSS를 사용한 스타일링 

          function sendMessage(event) {
    let message = document.getElementById("message").value;
    echo_service.send(message);
}

          PicoCSS는 페이지에 가볍고 우아한 스타일을 제공하여 추가적인 맞춤 CSS 없이도 양식과 이벤트 로그가 깔끔하게 보이도록 보장합니다.

          요약, 작동 방식

          1. 페이지가 로드되면 브라우저는 서버와 WebSocket 연결을 설정합니다.
          2. 연결에 성공하면 "? WebSocket에 연결되었습니다!"라는 메시지가 기록됩니다.
          3. 사용자는 입력 상자에 메시지를 입력하고 "제출" 버튼을 클릭할 수 있습니다. 메시지는 WebSocket 서버로 전송됩니다.

          다음 단계

          이 기사에서는 WebSocket 서버와 통신하기 위해 WebSocket 클라이언트를 구현하는 방법을 살펴보았습니다. 이 시리즈의 이전 기사에서는 기본 WebSocket 서버 구성에 중점을 두었습니다.

          다음 기사에서는 브로드캐스팅 로직을 구현하여 WebSocket 기능을 더 자세히 살펴보겠습니다. 이 기능을 사용하면 한 클라이언트의 메시지를 연결된 모든 클라이언트에 전달할 수 있으므로 채팅 시스템, 공동 작업 도구 또는 실시간 알림과 같은 실시간 애플리케이션을 구축하는 데 필수적입니다.

          기대해 주세요!

          위 내용은 JavaScript를 사용한 WebSocket 클라이언트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    • JavaScript css html for Error Logging using Event append function this input ul li http websocket issue
    성명：
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    이전 기사：Three.js 최적화: ey 기술다음 기사：Three.js 최적화: ey 기술

    관련 기사

    더보기