JavaScript를 사용한 WebSocket 클라이언트-JS 튜토리얼-php.cn

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개의 주요 이벤트 핸들러가 있습니다.

onopen (연결이 설정되었습니다)

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

로그인 후 복사

서버 연결이 성공적으로 이루어지면 onopen 함수가 실행됩니다.
로그에 "? Connected to 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 (
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 이벤트와 메시지를
  - insertAdjacentHTML("beforeend", "
  - " text ";
  - )으로 삽입합니다. .