EMDI는 지금도 개발중

웹 소켓(WebSocket) 본문

IT/잡다한지식

웹 소켓(WebSocket)

EMDI 2020. 6. 10. 16:06

웹 환경은 브라우저(클라이언트)에서 웹 서버에 html문서를 요청하면, 웹 서버는 html를 작성하고 브라우저(클라이언트)에 응답 한 후 연결을 끊는 비동기 소켓 통신입니다. WebSocket은 브라우저(클라이언트)가 접속 요청을 하고 Web 서바가 응답을 한 후 연결을 끊는 것이 아니라 Connection을 그대로 유지하고 브라우저(클라이언트)의 요청이 없어도 데이터를 전송할 수 있는 프로토콜입니다.

 

1. 일반 웹의 프로토콜과 웹소켓의 예시

일반 웹 프로토콜의 경우는 서버와 브라우저(클라이언트)와 연결이 끊긴 상태이기 때문에 브라우저에서 요청이 오지 않는 이상 다른 사용자에게 응답 메세지를 보낼 수 없다. 하지만 WebSocket의 경우에는 서버와 브라우저(클라이언트)가 끊기지 않은 상태이기 때문에 브라우저(클라이언트)의 요청이 없어도 서버에서 브라우저로 메시지를 보낼 수가 있다.

 

2. 웹소켓

WebSocket의 경우 HTML5부터 표준이 되어, WebSocket을 지원하지 않는 브라우저는 이제 없는거나 마찬가지입니다. 프로토콜 요청은 ws://~ 로 시작합니다. ssl방식이라면 wss://~ 로 시작합니다.

1) WebSocket(Java)

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.server.ServerEndpoint;

// WebSocket의 호스트 주소 설정
@ServerEndpoint("/websocket")
public class Websocket {

  // WebSocket으로 브라우저가 접속하면 요청되는 함수
  @OnOpen
  public void handleOpen() {
    // 콘솔에 접속 로그를 출력한다.
    System.out.println("client is now connected...");
  }
  
  // WebSocket으로 메시지가 오면 요청되는 함수
  @OnMessage
  public String handleMessage(String message) {
    // 메시지 내용을 콘솔에 출력한다.
    System.out.println("receive from client : " + message);
    // 에코 메시지를 작성한다.
    String replymessage = "echo " + message;
    // 에코 메시지를 콘솔에 출력한다.
    System.out.println("send to client : "+replymessage);
    // 에코 메시지를 브라우저에 보낸다.
    return replymessage;
  }
  
  // WebSocket과 브라우저가 접속이 끊기면 요청되는 함수
  @OnClose
  public void handleClose() {
    // 콘솔에 접속 끊김 로그를 출력한다.
    System.out.println("client is now disconnected...");
  }
  
  // WebSocket과 브라우저 간에 통신 에러가 발생하면 요청되는 함수.
  @OnError
  public void handleError(Throwable t) {
    // 콘솔에 에러를 표시한다.
    t.printStackTrace();
  }
}
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head><title>Web Socket Example</title></head>
<body>
<form>
<!-- 송신 메시지를 작성하는 텍스트 박스 -->
<input id="textMessage" type="text">
<!-- 메시지 송신을 하는 버튼 -->
<input onclick="sendMessage()" value="Send" type="button">
<!-- WebSocket 접속 종료하는 버튼 -->
<input onclick="disconnect()" value="Disconnect" type="button">
</form>
<br />
<!-- 콘솔 메시지의 역할을 하는 로그 텍스트 에리어.(수신 메시지도 표시한다.) -->
<textarea id="messageTextArea" rows="10" cols="50"></textarea>
    <script type="text/javascript">
    
    // 「WebSocketEx」는 프로젝트 명
    // 「websocket」는 호스트 명
    // WebSocket 오브젝트 생성 (자동으로 접속 시작한다. - onopen 함수 호출)
    var webSocket = new WebSocket("ws://localhost:8080/WebSocketEx/websocket");
    
    // 콘솔 텍스트 에리어 오브젝트
    var messageTextArea = document.getElementById("messageTextArea");
    
    // WebSocket 서버와 접속이 되면 호출되는 함수
    webSocket.onopen = function(message) {
    // 콘솔 텍스트에 메시지를 출력한다.
    messageTextArea.value += "Server connect...\n";
    };
    
    // WebSocket 서버와 접속이 끊기면 호출되는 함수
    webSocket.onclose = function(message) {
    // 콘솔 텍스트에 메시지를 출력한다.
    messageTextArea.value += "Server Disconnect...\n";
    };
    
    // WebSocket 서버와 통신 중에 에러가 발생하면 요청되는 함수
    webSocket.onerror = function(message) {
    // 콘솔 텍스트에 메시지를 출력한다.
    messageTextArea.value += "error...\n";
    };
    
    // WebSocket 서버로 부터 메시지가 오면 호출되는 함수
    webSocket.onmessage = function(message) {
    // 콘솔 텍스트에 메시지를 출력한다.
    messageTextArea.value += "Recieve From Server => "+message.data+"\n";
    };
    
    // Send 버튼을 누르면 호출되는 함수
    function sendMessage() {
    // 송신 메시지를 작성하는 텍스트 박스 오브젝트를 취득한다.
    var message = document.getElementById("textMessage");
    // 콘솔 텍스트에 메시지를 출력한다.
    messageTextArea.value += "Send to Server => "+message.value+"\n";
    // WebSocket 서버에 메시지를 송신한다.
    webSocket.send(message.value);
    // 송신 메시지를 작성하는 텍스트 박스를 초기화한다.
    message.value = "";
    }
    
    // Disconnect 버튼을 누르면 호출되는 함수
    function disconnect() {
    // WebSocket 접속 해제
    webSocket.close();
    }
    </script>
</body>
</html>

해당 내용은 아래의 링크를 참고하여 공부하려고 재정리한 내용입니다. 자세한 사항은 아래의 링크를 참고해주세요.

 

[Java] Servlet에서 사용하는 웹 소켓 (WebSocket)

안녕하세요. 명월입니다. 이 글은 Java의 Servlet에서 사용하는 웹 소켓 (WebSocket) 에 대한 글입니다. 보통의 웹 환경은 브라우저(클라이언트)에서 웹 서버에 Html 문서를 요청하면, 웹 서버는 Html를 작

nowonbun.tistory.com

 

 

2) WebSocket(C#)

using Fintax.Crypto;
using Fintax.Common.Utility;
using Fintax.Value;
using Newtonsoft.Json.Linq;
using System;
using System.Security.Cryptography;
using System.Text;
using System.Windows.Forms;
using System.Xml;
using WebSocketSharp;
using WebSocketSharp.Server;
using System.IO;

using Newtonsoft.Json.Linq;
using System;
using System.Security.Cryptography;
using System.Text;
using System.Windows.Forms;
using System.Xml;
using WebSocketSharp;
using WebSocketSharp.Server;
using System.IO;

namespace Project
{
    class WSBehavior : WebSocketBehavior
    {
        /// <summary>
        /// 요청에 대한 응답 처리 메소드
        /// </summary>
        protected override void OnMessage(MessageEventArgs e)
        {
            string receivedString = Encoding.UTF8.GetString(e.RawData);
            var json = JObject.Parse(receivedString);

            string type = json["type"].ToString();

            switch (type) {
                //로그인 요청 시
                case "login":
                    try { 

                        //로그인 모듈 호출
                        string result = ShowFormAndReturnResult();

                        //결과값 웹페이지에 전송
                        Send(JObject.Parse(result).ToString());
                    }
                    catch (Exception ex)
                    {
                        JObject createResult = new JObject();
                        createResult.Add("type", "error");
                        Send(createResult.ToString());
                    }
                    break;
            }
        }

        protected override void OnClose(CloseEventArgs e) {}
        protected override void OnError(WebSocketSharp.ErrorEventArgs e) { }
        protected override void OnOpen() {}

        /// <summary>
        /// 로그인 모듈 호출 및 결과 반환(동기식)
        /// </summary>
        public string ShowFormAndReturnResult()
        {
            ProjectMain main = new ProjectMain();
            ProjectMain.WindowState = FormWindowState.Minimized;
            ProjectMain.Shown += delegate (Object sender, EventArgs e) {
                ((Form)sender).WindowState = FormWindowState.Normal;
            };
            ProjectMain.ShowDialog();
            return ProjectMain.Result;
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using WebSocketSharp.Server;

namespace Project
{
    public class Server
    {
        private WebSocketServer server;

        public Server(int port)
        {
            server = new WebSocketServer(port);
            server.AddWebSocketService<WSBehavior>("/");
        }

        /// <summary>
        /// 서비 실행 
        /// </summary>
        public void Start()
        {
            server.Start();
            Console.WriteLine("Starting websocket server at " + server.Address.ToString() + " : " + server.Port);
        }

        /// <summary>
        /// 서버 소켓 리스닝 여부
        /// </summary>
        /// <returns></returns>
        public Boolean IsListening()
        {
            return server.IsListening;
        }
    }
}

 

'IT > 잡다한지식' 카테고리의 다른 글

C# : Convert 금액 정수 형식의 특성  (0) 2021.04.15
Django 클래스 기반 뷰와 함수 기반 뷰 차이점  (0) 2020.06.19
자료 구조 list, set, map의 차이  (0) 2020.03.27
Spring에서 사용하는 MVC패턴  (0) 2020.03.27
JDBC, MyBatis, log4j, Transaction과 오라클의 관계  (0) 2020.03.27
'IT/잡다한지식' Related Articles more
Comments