728x90
socket.io는 이벤트를 통해 데이터를 교환합니다.
emit과 on함수를 사용해합니다.
socket.emit('이벤트 이름', data), 이를 통해 이벤트를 발생시킵니다.
socket.on('이벤트 이름', function(data){}), 이벤트를 받아 처리할 수 있습니다.
서버에서 클라이언트로
클라이언트에서 서버로 데이터를 보낼 수 있습니다.
전자의 경우 서버에 이벤트를 등록하고 클라이언트에서 이벤트를 발생시킵니다.
후자의 경우 클라이언트에 이벤트를 등록하고 서버에서 이벤트를 발생시킵니다.
서버에서 클라이언트로 데이터를 보내는 것부터 예제를 통해 알아보도록 하겠습니다.
아래 코드는 서버 코드입니다.
hi라는 이름의 이벤트에 객체 데이터를 담아 보냅니다.
var express = require('express')
var http = require('http');
const { Socket } = require('socket.io');
var app=express();
var server = http.Server(app);
server.listen(8080);
var io = require('socket.io')(server);
app.get('/',(req,res)=>{
res.sendFile(__dirname+'/socketio.html')
})
io.on('connection',(Socket)=>{
console.log("클라이언트 접속")
//hi라는 이름의 이벤트로 데이터를 보낸다
Socket.emit('hi',{message_1:'balmostory',message_2:'balmostory_2',message_3:'balmostory_3'})
})
클라이언트 코드입니다. hi라는 이벤트 안에 담겨온 데이터들을 li태그로 하나씩 만들어줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- socketio 라이브러리 로딩하는 cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.3/socket.io.js"></script>
<script>
// 클라이언트를 만드는 코드
// 접속시도을 합니다.
var socket = io();
//연결되면 connect이벤트가 발생한다.
socket.on('connect', function (arg) {
console.log('server connect success')
});
//서버가 보낸 hi라는 이벤트에 대한 처리를 하는 부분
socket.on('hi', (data) => {
var keys=Object.keys(data);
for (i in keys) {
document.writeln('<li>')
document.writeln(data[keys[i]])
document.writeln('</li>')
}
})
</script>
</body>
</html>
결과는 아래와 같습니다.
클라이언트에서 서버로 데이터를 보내보도록 하겠습니다.
클라이언트에서 이름 데이터를 받아와 서버 콘솔에 출력하도록 하겠습니다.
name이라는 이름의 이벤트를 받아 출력해주는 코드를 추가했습니다.
var express = require('express')
var http = require('http');
const { Socket } = require('socket.io');
var app=express();
var server = http.Server(app);
server.listen(8080);
var io = require('socket.io')(server);
app.get('/',(req,res)=>{
res.sendFile(__dirname+'/socketio.html')
})
io.on('connection',(Socket)=>{
console.log("클라이언트 접속")
Socket.on('name',(name)=>{
console.log(name)
})
})
버튼을 누르면 myfunction안에 있는 socket.on이 실행되면서 input 태그 안에 있는 데이터를 서버로 보내는 이벤트가 발생합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- socketio 라이브러리 로딩하는 cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.3/socket.io.js"></script>
<label for="name">Name:</label>
<input type="text" id="name">
<button onclick="myFunction()">submit</button>
<script>
// 클라이언트를 만드는 코드
// 접속시도을 합니다.
var socket = io();
//연결되면 connect이벤트가 발생한다.
socket.on('connect', function (arg) {
console.log('server connect success')
});
function myFunction() {
socket.emit('name',document.getElementById("name").value)
}
</script>
</body>
</html>
정상적으로 결과가 나온 것을 확인할 수 있습니다.
728x90
'기타 > Express.js' 카테고리의 다른 글
| socket io namespace room(1) (2) | 2020.12.13 |
|---|---|
| express socket.io 기본 사용법(1) (0) | 2020.12.10 |
| express 오류 처리 미들웨어 (0) | 2020.11.26 |
| express 미들웨어 만들기, body-parser, cors 사용하기 (0) | 2020.11.26 |
