채팅서버는?
채팅서버는 회사에서 채팅서버를 만들때 사용한 Socket.io
로 구성하기로 했다. 요즘 추세는 websocket이라는 모듈이 더
많이 사용되고 있는것 같으나 지원하는 브라우저에 대한 버전이 다르다
Firefox 7-9 (Old) (Protocol Version 8)
Firefox 10+ (Protocol Version 13)
Chrome 14,15 (Old) (Protocol Version 8)
Chrome 16+ (Protocol Version 13)
Internet Explorer 10+ (Protocol Version 13)
Safari 6+ (Protocol Version 13)
위와 같은 브라우저 버전을 지원하는데 회사에서는 B2B 고객도
지원을 하다보니 구버전의 브라우저를 사용하는 경우가 많아
Socket.io를 사용하고 있다. 굳이 프로젝트를 만들때 구버전의
브라우저를 지원할 필요는 없으나 기왕이면 회사에서 사용하는 Socket.io
를 한번 더 복기해보고 몰랐던 부분을 공부하고 기왕이면 구버전도 지원해줄겸
선택했다.
Socket.io 와 Websocket 모듈의 큰 차이점은 아마도 Polling 처리를 지원여부에
있는것 같다. 사실 Socket.io도 Websocket으로만 통신을 하도록 옵션 설정이 가능하다
- Socket.io가 지원하는 브라우저
앱을 만들기-2
우선은 첫째로,
npm install express
명령어를 통해서 express를 설치해준다
var app = require("express")();
var http = require("http").createServer(app);
app.get("/", (req, res) => {
res.send("<h1>Hello world</h1>");
});
http.listen(3000, () => {
console.log("listening on *:3000");
});
그리고 공식문서에 설명해주는대로
chatServer.js
라는 파일을 만들고 해당 코드를 넣었다.
서버를 만들었으니 이제 IO모듈을 통해서
채팅이 가능하도록 만들면 된다!
var app = require("express")();
var http = require("http").createServer(app);
var io = require("socket.io")(http);
app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
io.on("connection", (socket) => {
io.on("connection", (socket) => {
socket.on("chat message", (msg) => {
socket.emit("message: " + msg);
});
});
});
http.listen(3000, () => {
console.log("listening on *:3000");
});
해당부분을 서버 코드에 추가를 해주면
채팅서버로 접속한 사용자는 io모듈에 접속하게 된다
코드에 보이는 내용처럼 ‘connection’에 들어오게 됨
그리고 클라이언트단에 Socket.io 라이브러리를 임포트 시킨후에
내가 작성한 서버에 주소로 연결을 시켜준 후
chat message 라는 채널명을 넣어서 메시지를 보내면
이를 서버가 전달받고 다시 이를 socket으로 보내준다.
네임스페이스나 룸을 통해서 채팅을 하는 작은 단위의 방을 만들어서
보낼 수 있고 전체에게 브로드 캐스트를 할 수 있으나
채팅의 경우는 방을 기준으로 사용자들을 묶어주고 그들간의 채팅을
가능하도록 구성해주면 된다
<script>
$(function () {
var socket = io();
$('form').submit(function(e){
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>
클라이언트단 소스
Notices
간단하게 채팅서버를 구성했으나 이번기회에 TypeScript와 Jest를 사용해서 단위테스트와 코드 커버리지 테스트를 진행해야겠다.