1. socket.io 구성
socket.io는 두 가지로 구성됩니다
- socket.io : 서버에서 사용되는 모듈 입니다.
- socket.io-client: 브라우저에서 사용되는 모듈입니다.
2. socket.io 설치
npm을 이용해 설치하겠습니다
npm install socket.io1) 서버 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언어로 작성했던 채팅 소스와 비교하니 감개무량합니다
:)
'Front-End > socket.io' 카테고리의 다른 글
| [socket.io] 6. socket.io를 이용한 채팅프로그램 - 닉네임추가 (0) | 2019.11.27 |
|---|---|
| [socket.io] 5. socket.io를 이용한 채팅프로그램 - 유저접속추가 (0) | 2019.11.26 |
| [socket.io] 4. socket.io를 이용한 채팅프로그램 - 이벤트처리 & 채팅완성 (0) | 2019.11.26 |
| [socket.io] 2. socket.io를 이용한 채팅프로그램 - 프로젝트 설정 (0) | 2019.11.21 |
| [socket.io] 1. socket.io란 무엇인가? (0) | 2019.11.20 |
리딩리드
