[socket.io] 3. socket.io를 이용한 채팅프로그램 - socket.io 연동

1. socket.io 구성

socket.io는 두 가지로 구성됩니다

- socket.io : 서버에서 사용되는 모듈 입니다.

- socket.io-client: 브라우저에서 사용되는 모듈입니다.

2. socket.io 설치

npm을 이용해 설치하겠습니다

npm install socket.io

1) 서버 socket.io

index.js

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

app.get('/', function(req, res){
	res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket) {
	console.log('a user connected');
});

http.listen(3000, function () {
	console.log('listening on*: 3000');
});

- socket.io를 require 받은 후 .on 함수로 connection 이벤트를 연결합니다.
- socket.io 변수로 http 객체를 전달받았습니다.
- 이제 서버로 들어오는 socket연결들을 리스닝 할 수 있습니다.

2) 클라이언트 socket.io-client

    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
    </script>

-  </body> 태그 이전에 위와같이 등록합니다. 
- io() 함수가 글로벌하게 등록되었습니다. 클라이언트에 로드되는 모든 브라우저 소켓에 작동합니다
- 만약 글로벌보다는 로컬버전으로 사용하게 하고싶다면 node_modules/socket.io-client/dist/socket.io.js연결하면 됩니다
- io() 안에 특정한 url을 등록하지 않았습니다. url을 등록하지 않았다면 자동적으로 서버 호스트로 연결합니다.

3. socket.io 실행

위의 과정을 했다면 노드서버를 다시 작동시키겠습니다.

node index.js

 그리고 브라우저 창에 localhost:3000으로 접속합니다.

localhost:3000으로 접속했을때 커맨드라인에 a user connected 가 출력됬다면 소켓이 연결된 것입니다. 여러 창을 띄워볼까요?

창을 두개 띄웠더니 a user connected 가 두개 생성되었습니다. 

4. socket.io 연결끊기 추가

위 상태에서 브라우저창을 닫으면 터미널에 아무것도 출력되지 않습니다. 이제 소켓연결이 끊어진것도 추가하겠습니다

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

app.get('/', function(req, res){
	res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket) {
	console.log('a user connected');
	socket.on('disconnect', function() {
		console.log('user disconnected');
	});
});

http.listen(3000, function () {
	console.log('listening on*: 3000');
});

- io.on 함수에 disconnect 이벤트를 추가했습니다

다시 서버를 재가동한후 localhost:3000에 접속했다가 브라우저를 닫아 보겠습니다.

위와같이 연결이 끊겼다고 나오면 성공입니다.

다음에는 드디어 채팅창을 만들어 보도록 하겠습니다. 예전에 c언어로 작성했던 채팅 소스와 비교하니 감개무량합니다 
:)