websocket 사용하기 (라이브러리X)

안녕하세요 웹코기입니다.

 

저는 현재 사내에서 웹소켓을 이용해 실시간 채팅 기능을 구현하고 있습니다.

웹소켓은 개념 정도만 알고 있었는데, 역시 실제로 사용해보니 어떤 녀석인지 확 와닿더군요...!!

 

기존에 서버에서 통신할 땐

ajax나 axios만 사용했던 터라 단방향 통신에만 익숙했었는데요,

websocket을 이용해 양방향 통신을 해보니 신세계네요 :)

 

 

websoket.io나 다른 웹소켓 관련 라이브러리를 사용하면 더 편하게 사용할 수 있는 것으로 파악됐으나, 

저는 사내 프로젝트가 프런트엔드 프레임워크나 nodejs를 사용하지 않은 이미 날 것(?)의 재료를 썼으므로, 저 또한 날 것의 websocket을 쓰기로 했습니다.

 

 

 

아래는 라이브러리를 전혀 사용하지 않고 작업한 소스입니다.

웹에 갖다 붙이면 그대로 쓰실 수 있어요.

//////////////////////////////////////
//////// WebSocket Handler ///////////
//////////////////////////////////////
if (window["WebSocket"]) {
	var logMsgKey = 0;
	var msgKey = 0;
	var topicListObject = new Map();
	var topicListButtonMap = new Map();

	var websocketConnection = new WebSocket("ws://" + location.host + "/ws");

	websocketConnection.onclose = function (evt) {
		if (evt.wasClean) {
			console.log("[close] 커넥션이 정상적으로 종료되었습니다 + (code=" + evt.code + " reason=" + evt.reason + ")");
		} else {
			console.log("[close] 커넥션이 죽었습니다. + (code=" + evt.code + " reason=" + evt.reason + ")");
		}
	};

	websocketConnection.onopen = function (evt) {
		console.log('Connection onopen.');
	};

	websocketConnection.onerror = function (error) {
		console.log('Connection onerror.');
	};

	websocketConnection.onmessage = function (evt) {
		var messages = evt.data.split('\n');
		for (var index = 0; index < messages.length; index++) {])
			console.log(messages[index]);
		}
	};
} else {
	console.log("Your browser does not support WebSockets.");
}

 

1. 웹소켓 연결

2. 웹소켓 open

동작 순서로 이루어지고요!!

 

websocketConnection.send('메시지')

를 필요한 곳에서 사용하게 된다면, 서버를 통해 onmessage에서 해당 값을 실시간으로 받게 됩니다.

 

 

현재 작업한 이벤트는 

onclose, onopen, onerror, onmessage를 사용했는데요,

아래의 링크에 보시면 더 많은 재료를 확인하실 수 있습니다.

 

https://developer.mozilla.org/ko/docs/Web/API/WebSocket

WebSocket - Web API | MDN