JavaScript를 사용한 WebSocket 클라이언트

이 시리즈의 이전 기사 "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 서버에 클라이언트로 연결하기 위한 논리를 제공합니다.

    
        <title>WebSocket with Bun and JavaScript</title>
        <script>
            let echo_service;
            append = function (text) {
                document
                    .getElementById("websocket_events")
                    .insertAdjacentHTML("beforeend", "<li>" + text + ";");
            };
            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">
    

    
        <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">

    
        <title>WebSocket with Bun and JavaScript</title>
    
    
        <main>



<ul>
<li>The input field (<input>
</li>
<li>The submit button (<input type="button">): when clicked, it triggers the sendMessage(event) function to send the typed message to the server.</li>
<li>The messages/events log (<ul>
</ul>


<hr>

<h3>
  
  
  The JavaScript logic
</h3>

<h4>
  
  
  Initializing the WebSocket connection
</h4>



<pre class="brush:php;toolbar:false">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(메시지가 수신됨)

    
        <title>WebSocket with Bun and JavaScript</title>
        <script>
            let echo_service;
            append = function (text) {
                document
                    .getElementById("websocket_events")
                    .insertAdjacentHTML("beforeend", "<li>" + text + ";</script>

"); }; 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); }

Explaining the client code

This code creates a simple WebSocket client in a browser to interact with a WebSocket server. Here's a detailed explanation of its components:

---

The HTML structure

    
        <title>WebSocket with Bun and JavaScript</title>
    
    
        <main>



<ul>
<li>The input field (<input>
</li>
<li>The submit button (<input type="button">): when clicked, it triggers the sendMessage(event) function to send the typed message to the server.</li>
<li>The messages/events log (<ul>
</ul>


<hr>

<h3>
  
  
  The JavaScript logic
</h3>

<h4>
  
  
  Initializing the WebSocket connection
</h4>



<pre class="brush:php;toolbar:false">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 기능을 더 자세히 살펴보겠습니다. 이 기능을 사용하면 한 클라이언트의 메시지를 연결된 모든 클라이언트에 전달할 수 있으므로 채팅 시스템, 공동 작업 도구 또는 실시간 알림과 같은 실시간 애플리케이션을 구축하는 데 필수적입니다.

기대해 주세요!