WebSocket 사용 방법

WebSocket 프로토콜( WS )은 지속적인 연결을 통해 브라우저와 서버 간에 데이터를 교환하는 기능을 제공합니다. 데이터는 연결 및 추가 HTTP 요청을 끊지 않고 "패킷" 형태로 양방향으로 전송됩니다.

WebSocket은 대화방, 온라인 게임, 실시간 마켓플레이스 등과 같은 지속적인 커뮤니케이션 서비스에 적합합니다.

예를 들어 간단한 채팅을 위한 백엔드를 만들어 보겠습니다. 다음과 같은 기본 기능을 제공해야 합니다.

1. 채팅으로 메시지 보내기.
2. 메시지의 저자 결정.
3. 작업 알림. 예를 들어 새 회원이 채팅에 참여하고, 채팅을 나가고, 입력 표시기(누군가 입력 중...)

데이터베이스 모델

데이터베이스에 대한 모델을 생성하여 시작하겠습니다. 처음에 데이터베이스에 메시지 및 통신 기록을 저장할 계획이 없더라도 메시지 및 알림 전송을 구조화하기 위한 모델이 여전히 필요합니다.

다음을 포함하는 일반 chat_event 모델을 만들어 보겠습니다.

1. 사용자와의 관계. 모든 메시지에는 참조하는 사용자에 대한 정보가 포함됩니다.
2. 4가지 가능한 옵션이 있는 Type (enum) 필드입니다. Connected 및 Disconnected 됨 - 사용자가 연결되거나 연결 해제될 때 알림을 위해 사용합니다. Typing - 사용자가 현재 새 메시지를 작성하고 있다는 정보를 전달합니다. Message - 표준 텍스트 메시지의 경우.
3. Message (text) - 메시지의 텍스트입니다.
   

끝점 구성

다음 개발 단계는 응용 프로그램의 다른 기능에 공통적인 표준 접근 방식과 약간 다릅니다. 일반적으로 비즈니스 프로세스가 생성된 다음 이를 실행하도록 엔드포인트가 구성됩니다. WebSockets의 경우 모든 것이 다르게 발생하며 시작점은 비즈니스 프로세스가 추가로 생성되는 트리거를 기반으로 엔드포인트를 생성하는 것입니다.

끝점 섹션이 필요합니다. 여기에서 적절한 옵션 WebSocket Endpoint 를 선택하여 새 엔드포인트를 생성합니다.

WebSockets의 경우 요청 방법을 선택할 수 없습니다. 항상 GET 입니다. 단순 URL - /chat/ 을 지정하고 동일한 이름으로 그룹을 생성해 봅시다.

다음으로 WebSocket 내에서 데이터 교환 형식을 결정할 변수를 만들어야 합니다.

• Client-to-Server . 표준 비즈니스 프로세스에 대한 수신 매개변수와 유사합니다. 이 예제에서는 간단한 텍스트 변수 메시지를 생성합니다(일반 텍스트 메시지를 서버로 보냅니다).
• Server-to-Client . 여기에서 서버 메시지에 대한 변수가 생성되어 서버에서 사용자에게 데이터를 보냅니다. 이는 사용자 요청에 대한 응답과 동일하지 않습니다. 사용자 작업에 대한 반응으로 보낼 수도 있지만 일부 외부 이벤트로 인해 발생하는 경우가 더 많습니다. 이 예에서 서버는 채팅의 모든 이벤트에 대한 알림을 보내므로 chat_event 모델을 변수로 설정합니다.
  

변수를 만든 후에는 WebSocket의 논리를 만드는 주요 작업을 진행할 수 있습니다. WebSocket에서 새 메시지를 수신할 때와 연결이 설정되거나 연결이 끊어질 때 실행되는 트리거를 기반으로 합니다.

비즈니스 프로세스 생성

connect 트리거를 사용하고 이에 대한 비즈니스 프로세스를 생성해 보겠습니다. 사용자가 WebSocket과 연결을 설정하는 순간 시작되며 작업은 연결된 모든 사용자에게 이에 대한 알림을 보내는 것입니다.

시작 블록에는 User ID 와 Connection ID 라는 두 개의 매개변수가 포함되어 있습니다. 따라서 연결을 설정한 사용자를 즉시 확인할 수 있을 뿐만 아니라 이 연결에 대한 고유 식별자도 얻을 수 있습니다. 앞으로 이 식별자는 예를 들어 대상 메시지를 보내거나 연결을 강제로 종료하는 데 사용할 수 있습니다.

비즈니스 프로세스의 필요한 모든 단계를 작성하십시오.

1. Make User . 시작 매개변수인 User ID 를 사용하여 사용자 모델을 생성해 봅시다.
2. Make chat_event . 이벤트 알림 모델을 만듭니다. 이전 단계에서 만든 모델을 사용하여 사용자에게 연결하고 이벤트 유형을 선택하고 Type = Connected 로 설정합니다. 이 경우 전송되는 메시지가 아니라 연결 알림이기 때문에 message 매개 변수를 사용하지 않습니다.
3. WSS Connections /chat/ . 이 블록을 사용하여 모든 활성 WebSocket 연결 목록을 가져옵니다.
4. For Each Loop 에 대해 . 연결 배열을 루프 매개변수로 사용하여 연결된 각 사용자에게 알림을 보냅니다.
5. Expand WebSocket Connection . 연결 정보를 확장하여 Connection ID 를 가져옵니다.
6. WSS Send /chat/ . Connection ID 와 생성된 chat_event 를 사용하여 알림을 보냅니다.

Postman을 사용하여 WebSocket 테스트

이 단계에서 WebSocket은 중요한 기능이 없지만 이미 작동 중이며 실제로 테스트할 수 있습니다. 이렇게 하려면 WebSocket 작업을 허용하는 모든 도구를 사용할 수 있습니다. Postman 을 예로 들어 이 작업을 수행하는 방법을 살펴보겠습니다.

New button 을 클릭하고 WebSocket Request 을 선택해야 합니다.

WebSocket의 URL을 지정해야 합니다. WebSocket이 나머지 끝점과 함께 목록에 있는 Swagger 를 사용하여 찾을 수 있습니다.

표준 요청과 달리 WebSocket은 wss 프로토콜을 사용하여 작동하므로 https 를 wss 로 바꿔야 합니다. 결과는 다음과 유사한 URL이어야 합니다. wss://qvlxglh-app.apms.io/api/chat/

다음으로 연결은 익명일 수 없으므로 요청에 인증 토큰을 추가해야 합니다. Bearer lBCiunRWg6BfogDrLml4jrC4iJiWucKo 와 같은 값으로 Authorization 헤더를 생성해야 합니다. lBCiunRWg6BfogDrLml4jrC4iJiWucKo 대신 인증 결과로 얻을 수 있는 고유한 토큰을 삽입해야 합니다( POST /auth/ 엔드포인트).

모든 것이 올바르게 완료되면 Connect 버튼을 클릭하면 연결이 설정되고 이전에 생성된 전송 비즈니스 프로세스인 서버 측에서 첫 번째 메시지가 수신됩니다.

동시에 서버로부터의 메시지 수신이 당사의 일부 요청에 대한 반응으로만 발생하지 않도록 할 수 있습니다. 다른 사용자의 행동으로 인해 발생할 수 있습니다. 이를 테스트하기 위해 다른 사용자의 인증 토큰을 사용하여 다른 탭에서 연결을 설정할 수 있습니다. 이를 알리는 서버의 메시지가 활성 연결이 있는 모든 탭으로 전송됩니다.

메시징을 위한 비즈니스 프로세스

이제 WebSocket의 기능을 계속 개발하고 메시징을 위한 비즈니스 프로세스를 만들 수 있습니다. 그건 그렇고, 지금 메시지를 보낼 수 있지만 먼저 논리를 만들지 않으면 의미가 없으며 메시지가 반응을 일으키지 않습니다. 따라서 끝점 설정으로 돌아가 receive 트리거에 대한 비즈니스 프로세스를 생성해 보겠습니다.

여러면에서 이전 비즈니스 프로세스와 유사합니다. 메시지를 chat_event 를 생성하고 이에 대한 알림을 모든 채팅 참가자에게 보내야 합니다. 차이점은 메시지 자체가 chat_event 에 추가되어야 하고 메시지 작성자가 메일링 리스트에 포함될 필요가 없다는 것입니다.

동일한 블록이 비즈니스 프로세스의 첫 번째 부분에서 사용됩니다. Make chat_event 블록에서 type = message 를 설정하고 시작 블록에서 메시지 자체를 첨부해야 합니다.

루프에서 (Equal block)을 확인하고 수신자의 연결 ID가 발신자의 연결 ID와 일치하지 않는 경우( If-Else = False )에만 메시지를 보내야 합니다.

결과를 게시하고 테스트를 시작할 수 있습니다. 메시지 자체는 JSON 형식이므로 message 변수를 사용하면 다음과 같이 표시됩니다.

{"message":"Some text here"}

예에서 채팅 연결 알림을 받고 자신의 메시지를 보내고( Hi! ) 응답을 받는 것을 볼 수 있습니다( Glad to see you! ).

이것으로 WebSocket을 사용한 채팅을 위한 기본 백엔드 생성이 완료되었습니다. 프런트 엔드 구축을 시작하고 자신만의 실시간 메시징 앱을 개발할 수 있습니다.