채팅 기능 구현을 위해 socket.io를 사용해 보기로 하였다.
레퍼런스를 찾아보며 현재 프로젝트에 일단 적용해 보기로 하였다.
소켓은 실시간 채팅 시스템이 구축 된 솔루션으로, 클라이언트와 서버 사이에 양방향 통신 채널을 제공한다.
이는 서버가 클라이언트에게 메세지를 푸시 할 수 있음을 의미하고 채팅 메세지를 작성할 때마다 서버가 메세지를 가져 와서 연결된 다른 모든 클라이언트에게 푸시한다.
$ npm install --save typescript socket.io
$ npm install --save-dev @types/node @types/socket.io
먼저 socket.io를 설치한다
import socket from 'socket.io';
const app: Application = express();
const server = app.listen(3000);
const io = socket.listen(server);
이미 4000 포트를 사용 중이라 3000포트로 지정해 주었다.
io.on('connection', socket => {
console.log('A user has connected to the socket!');
socket.on('chat message', msg => {
console.log(`message: ${msg}`);
io.emit(`chat message: ${msg}`);
});
socket.on으로 메세지를 입력받고 io.emit으로 메세지를 뿌려준다.
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
...
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script>
$(function() {
var socket = io.connect('http://localhost:3000');
$('form').submit(function() {
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg) {
$('#messages').append($('<li>').text(msg));
window.scrollTo(0, document.body.scrollHeight);
});
});
</script>
</body>
</html>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
var socket = io.connect('http://localhost:3000');
두개의 코드에서 레퍼런스대로 했더니 해당 요청을 받을 수없는 에러나서 사용하는 포트를 적어 주었다.
결과
터미널 콘솔에는 입력값이 잘 찍히는데 웹 페이지에서는 표시가 되지 않는다.
좀 더 공부해봐야겠다.
'Project > TIL' 카테고리의 다른 글
| 20.04.01 ShareBook TIL (0) | 2020.04.01 |
|---|---|
| 20.03.31 ShareBook TIL (0) | 2020.04.01 |
| 20.03.29 ShareBook TIL (0) | 2020.03.29 |
| 20.03.28 ShareBook TIL (0) | 2020.03.29 |
| 20.03.27 ShareBook TIL (0) | 2020.03.27 |
