WebSocket을 사용하는 웹 앱과 데스크톱 애플리케이션 간의 전이중 통신

소개

웹 앱의 한계 중 하나는 하드웨어 액세스입니다. 특수 하드웨어를 사용하는 경우 통신이 불가능하지는 않지만 어려울 수 있습니다.
이 경우 클라이언트는 웹 앱과 하드웨어 간의 통신을 처리하는 소프트웨어를 설치해야 합니다.

이에 대한 예는 새 노트북을 구입한 다음 제조업체 웹 사이트를 방문하여 드라이버 업데이트를 확인하는 경우입니다. 대부분의 경우 랩톱을 검사하는 소프트웨어를 설치하라는 메시지가 표시됩니다. 그러면 결과가 웹사이트에 표시됩니다.

우리의 경우 이 소프트웨어는 WebSocket 서버 역할을 하며 브라우저는 세션을 시작하는 WebSocket 클라이언트입니다.



설계에 따라 소프트웨어는 백엔드 서버에 HTTP 요청을 보낼 수도 있습니다.

정말 필요합니까?

이 디자인은 필요할 때만 사용해야 합니다. 우리는 복잡도를 증가시키는 구성 요소를 시스템에 추가하고 있으며 사용자는 웹 앱을 사용하기 위해 소프트웨어를 설치해야 합니다. 이는 처음에 웹 앱을 사용해야 하는지 여부에 대한 질문을 제기합니다.

이 문서post는 하드웨어 장치와 통신하기 위한 대부분의 JavaScript API를 다룹니다. WebSocket 접근 방식을 시도하기 전에 먼저 확인하십시오.

개요

클라이언트 Windows 시스템에서 실행되는 WebSocket 서버에 연결할 간단한 웹 페이지를 생성합니다. 세션이 열리면 웹 페이지와 서버 간에 메시지를 교환할 수 있습니다.

WebSocket 클라이언트는 WebSocket API 으로 구현됩니다.
WebSocket 서버는 .Net Framework로 작성된 콘솔 응용 프로그램이며 WebSocket 서버 구현을 위해 SuperSocket을 사용합니다.

웹소켓 클라이언트

메시지를 작성하는 input와 수신된 메시지를 표시하는 div를 만듭니다.

<input id="input" type="text">
<div id="log"></div>

WebSocket 클라이언트 인스턴스를 생성하고 이벤트 리스너를 할당하는 간단한 함수입니다.

function createWebSocket() {
    const webSocket = new WebSocket('ws://127.0.0.1:85'); // In the constructor we use the loopback address and a free port

    webSocket.onopen = () => {
        webSocket.send('Connected');

        const input = document.getElementById('input');
        input.onkeydown = e => {
            if (e.code === 'Enter') {
                webSocket.send(input.value);
                input.value = null;
            }
        }
    }

    webSocket.onmessage = msg => {
        document.getElementById('log').innerHTML += `Server: ${msg.data} <br/>`;
    }

    return webSocket;
}

다음 코드에서:

WebSocket 서버에 계속 연결을 시도합니다.

세션이 닫히면 서버에 다시 연결할 방법이 없으며 대신 새 클라이언트 인스턴스를 만듭니다.

여러 가지 이유로 세션이 닫히지만 여기서는 서버에 연결할 수 없기 때문에 발생하며 대부분 서버가 아직 시작되지 않았기 때문입니다.

window.onload = async () => {
    var webSocket = createWebSocket();

    while (webSocket.readyState !== webSocket.OPEN) {
        await new Promise(res => setTimeout(res, 1000)); // wait 1 second

        if (webSocket.readyState === webSocket.CLOSED)
            webSocket = createWebSocket();
    }
}

웹소켓 서버

콘솔 응용 프로그램 생성

SuperSocket.Engine 및 SuperSocket.WebSocket를 모두 설치합니다. NuGet에서 가져올 수 있습니다.

서버 인스턴스를 만들고 이벤트 수신기를 추가합니다. 클라이언트(JavaScript) 코드와 얼마나 유사한지 확인하십시오.

static void Main()
{
    using WebSocketServer server = new();
    WebSocketSession currSession = null;

    server.NewSessionConnected += session =>
    {
        currSession = session;
        currSession.Send("Connected");
    };

    server.NewMessageReceived += (session, message) =>
    {
        Console.WriteLine($"Client: {message}");

        if (message == "close")
            session.Close();
    };

    server.SessionClosed += (_, reason) => Console.WriteLine($"Server: Connection closed. Reason: {reason}, press 'Enter' to exit.");

    // In the ServerConfig, the default IP value is the localhost
    ServerConfig config = new()
    {
        Port = 85, // same port number as in client
        MaxConnectionNumber = 1 // depending on you design, there might be more than one connection
    };

    server.Setup(config);
    server.Start();

    while (true)
    {
        string input = Console.ReadLine();

        if (currSession != null && !currSession.Connected)
            break;

        if (currSession != null)
            currSession.Send(input);
        else
            Console.WriteLine("Server: No session");
    }
}

그것을 테스트하자

잘 작동합니다!

보안 프로토콜(wss) 대신 비보안 프로토콜(ws)을 사용하고 보안 컨텍스트(https)에서 연결하더라도 연결이 차단되지 않습니다.
locally-delivered resources are considered secure 하지만 http://localhost 는 루프백 주소에 매핑되는 것이 보장되지 않기 때문에 이전 브라우저에서 안전한 것으로 간주되지 않기 때문입니다.
그렇기 때문에 ws://localhost가 최신 브라우저에서 잘 작동하지만 ws://127.0.0.1를 사용하는 것이 좋습니다.

또한보십시오

일부 정보는 오래되었습니다.

Browser Architecture: Web-to-App Communication Overview

When a web PKI certificate won't cut it

HOW PLEX IS DOING HTTPS FOR ALL ITS USERS

Let 'localhost' be localhost

WebSockets for fun and profit