<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><script>//소켓 변수var socket;//웹소켓 접속 함수functionconnect(){var uri ="ws://localhost:8080/websocket/basicServer"; socket =newWebSocket(uri);//연결이 되었는지 안되었는지 확인할 수 있도록 예약 작업(콜백)을 설정socket.onopen=function(){console.log("서버와 연결되었습니다"); };socket.onclose=function(){console.log("서버와 연결이 종료되었습니다"); };socket.onerror=function(){console.log("서버 연결 과정에서 오류가 발생했습니다"); };socket.onmessage=function(){console.log("메세지가 도착했습니다"); }; }//웹소켓 종료 함수functiondisconnect(){socket.close(); }//메세지 전송 함수 : 입력된 글자를 불러와서 서버에 전송functionsend(){var text =document.querySelector("#chat-input").value;if(!text){return; }socket.send(text);document.querySelector("#chat-input").value ="";//창 지우기 }</script><h1>Basic Websocket Example</h1><buttononclick="connect();">접속</button><buttononclick="disconnect();">종료</button><hr><inputtype="text"id="chat-input"><buttononclick="send();">전송</button>
코드 설명
웹소켓 서버
웹소켓 서버는 세 개의 메소드로 구성되어 있다.
이 메소드들은 상속받은 클래스인 TextWebSocketHandler를 통해 확인할 수 있다.
public void afterConnectionEstablished(WebSocketSession session)
public void afterConnectionClosed(WebSocketSession session, CloseStatus status)
mapping에는 등록된 bean의 id를 작성하고, path에는 현재 프로젝트의 기본 웹소켓 접속주소인 ws://localhost:8080/websocket을 제외한 뒷부분의 주소를 작성한다.
따라서 basicServer의 접속 주소는 다음과 같다.
ws://localhost:8080/websocket/basic
웹소켓 클라이언트
웹소켓 클라이언트 페이지에서는 Javascript WebSocket API를 사용한다. Mozila Reference 보기를 눌러서 확인할 수 있다.
웹소켓 연결 함수
웹소켓의 연결 작업을 처리할 수 있도록 connect 함수를 생성한다.
functionconnect(){}
웹소켓 주소 생성
connect 함수에 웹소켓 연결을 위한 주소 변수를 생성한다. 웹소켓의 주소는 ws로 시작한다.
(sockjs를 사용하면 http로 접속이 가능하지만 지금 문서에서는 다루지 않는다)
var uri ="ws://localhost:8080/websocket/basicServer";
이식성을 높이기 위해서 다음과 같이 계산하여 작성할 수 있다.
var uri ="ws://";uri +=location.host;uri +=location.pathname.substring(0,location.pathname.indexOf("/",2));uri +="/basicServer";
jsp 페이지에서는 EL을 사용하여 다음과 같이 context path 계산이 가능하다.
var uri ="ws://";uri +=location.host;uri +="${pageContext.request.contextPath}";uri +="/basicServer";
웹소켓 연결 생성
웹소켓 연결은 다음 코드 형태로 생성이 가능하다.
var socket =newWebSocket(주소 [,옵션]);
주소는 접속 가능한 웹소켓 주소를 작성하며, 옵션은 생략이 가능하다. 예제 코드에서는 socket 변수의 활용범위를 넓히기 위하여 다음과 같이 생성하였다.
var socket;functionconnect(){var uri ="...주소 생략..."; socket =newWebSocket(uri);}
다음과 같이 window에 등록하여 사용해도 된다(단, 이름 충돌에 유의해야 한다).
functionconnect(){var uri ="...주소 생략...";window.socket =newWebSocket(uri);}
콜백 함수 설정
connect 함수에서 웹소켓을 생성한 뒤 다음과 같은 콜백 함수를 설정할 수 있다.
onopen : 웹소켓 연결이 수립된 후 실행될 함수
onclose : 웹소켓 연결이 종료된 후 실행될 함수
onerror : 웹소켓 연결 오류 발생 후 실행될 함수
onmessage : 웹소켓을 통해 메세지가 수신되었을 경우 실행될 함수
콜백 함수는 예약작업이라고 생각하면 이해하기 쉬우며, 필요하지 않을 경우 설정하지 않아도 된다.
이 문서의 클라이언트 예제파일에서는 console.log 함수를 이용하여 콘솔 메세지만 출력하도록 구성하였다.
//연결이 되었는지 안되었는지 확인할 수 있도록 예약 작업(콜백)을 설정socket.onopen=function(){console.log("서버와 연결되었습니다");};socket.onclose=function(){console.log("서버와 연결이 종료되었습니다");};socket.onerror=function(){console.log("서버 연결 과정에서 오류가 발생했습니다");};socket.onmessage=function(){console.log("메세지가 도착했습니다");};
