1. 이벤트 발생
앞의 예제에서 socket.io를 연동하고 클라이언트에서 채팅창을 구현했습니다. 또한 클라이언트가 소켓을 연결헀을때 서버 로그로 접속되는것 까지 확인했습니다. 이번에는 클라이언트에서 발생한 이벤트를 서버로 전달하겠습니다.
예를들어 클라이언트 입력폼에 메시지를 submit 하면 서버에서 해당메시지를 받는지 확인하겠습니다.
2. 클라이언트 설정
index.html
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(e){
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
});
</script>
</body>기존에 작성했던 클라이언트 코드 <script> 부분을 위와같이 추가합니다.
- socket.emit() : 첫번째 변수가 key 값이 됩니다. server 소켓에서 이벤트를 감지할 경우 해당 키값으로 이벤트를 listen 합니다. 두번째 변수는 value 를 전달합니다.
3. 서버설정
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) {
socket.on('chat message', function(msg){
console.log('message: '+msg);
})
});
http.listen(3000, function () {
console.log('listening on*: 3000');
});
- socket.on(): 첫번째 변수는 키값으로 클라이언트에서 소켓 이벤트를 발생시켰을때 연결됩니다. 두번쨰 변수의 함수는 콜백함수로 클라이언트에서 넘어온 변수값을 받습니다.
위와 같이 localhost:3000으로 접속하여 채팅창에 값을 입력후 send를 누루면 서버 창에 log로 저희가 입력한 값들이 출력됩니다.
4. 브로드캐스트
서버로 받은 메시지를 이젠 다른 클라이언트들이 공유할 수 있도록 브로드캐스트 해보겠습니다.
index.html
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<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>
</body>- socket.on() : 서버에서 요청하는 이벤트를 listen 하는 역할을하며 데이터를 받아와 클라이언트에 노출시키는 작업을 할 수 있습니다.
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){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
http.listen(3000, function () {
console.log('listening on*: 3000');
});
- socket.on(): 다른 소켓(클라이언트)온 이벤트를 처리합니다
- io.emit() : 해당함수를 이용하여 서버에 데이터를 연결된 소켓으로 전달하는 역할을 합니다. 저희가 만들려면 채팅프로그램의 핵심입니다.
node index.js서버를 활성화 시킨후 localhost:3000 브라우저를 여러개 띄워주세요.
- 위 화면처럼 입력을 하면 양쪽의 브라우저에서 모두 노출되나요? 그렇다면 성공입니다. :)
5. 나를 제외한 클라이언트에게 브로드캐스팅
socket.broadcast.emit('chat message', 'hi');socket.broadcast: 나를 제외한 다른 사람에게만 브로드캐스팅합니다.
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){
socket.broadcast.emit('chat message', 'hi');
});
http.listen(3000, function () {
console.log('listening on*: 3000');
});
- 저희가 작업한 server 소스중에 이벤트 리슨하는부분을 위와같이 변경해주세요.
이후에 localhost:3000을 하나씩 띄운다면 기존에 있던 창에 hi가 출력되는것을 볼 수 있습니다.
'Front-End > socket.io' 카테고리의 다른 글
| [socket.io] 6. socket.io를 이용한 채팅프로그램 - 닉네임추가 (0) | 2019.11.27 |
|---|---|
| [socket.io] 5. socket.io를 이용한 채팅프로그램 - 유저접속추가 (0) | 2019.11.26 |
| [socket.io] 3. socket.io를 이용한 채팅프로그램 - socket.io 연동 (0) | 2019.11.25 |
| [socket.io] 2. socket.io를 이용한 채팅프로그램 - 프로젝트 설정 (0) | 2019.11.21 |
| [socket.io] 1. socket.io란 무엇인가? (0) | 2019.11.20 |
리딩리드