간단 요약:
server.js
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
http.listen(process.env.PORT, function () {
console.log('listening on port 8080');
});
app.get('/socket', function (req, res) {
res.render('socket.ejs');
});
io.on('connection', (socket) => {
// 프론트에서'user-send'이름으로 메세지 보내면 내부 코드실행해주세요..
socket.on('user-send', function (data) {
console.log(data);
});
});
client
// socket.ejs
<div class="container">채팅방</div>
<input type="text" id="input1" />
<button id="send">서버에 메세지 보내기</button>
// socket.js
function init() {
var socket = io();
$('#send').click(function (e) {
socket.emit('user-send', $('#input1').val());
});
}
init();
3줄 요약
1. npm i socket.io , http, io , http.listen
2. io.on(){ socket.on() }으로 클라이언트에서 보내는 데이터 받을 수 있음
3. 클라이언트는 socket.emit('','')으로 서버에 데이터 보낼 수 있음
마찬가지로, io.emit를 이용해서 서버에서 유저에게 메세지를 보낼 수 있다.
아래 코드는 클라에서 데이터를 보내면, socket.on으로 수신후, io.emit()으로 클라이언트한테 데이터를 보내고있다.
server.js
io.on('connection', (socket) => {
// 누가 'user-send'이름으로 메세지 보내면 내부 코드실행해주세요..
socket.on('user-send', function (data) {
io.emit('broadcast', '반가워');
});
});
socket은 주고 받고가 가능한데, 이 받는것이 가능하게끔해주는게 'socket.on'이다.
서버에서 데이터를 보냈으니 클라이언트에서도 받아줘야한다.
socket.js
function init() {
var socket = io();
$('#send').click(function (e) {
socket.emit('user-send', $('#input1').val());
});
socket.on('broadcast', function (data) {
console.log(data);
// 출력 결과: 반가워
});
}
init();
키워드는 io.emit()이다.
io.emit()은 소켓에 참여하고있는 모든 유저에게 메세지를 보내주는데 (단체 채팅방) 이걸 활용해서 코드를 이런식으로 작성하면 되겠다.
io.on('connection', (socket) => {
// 누가 'user-send'이름으로 메세지 보내면 내부 코드실행해주세요..
socket.on('user-send', function (data) {
io.emit('broadcast', data);
});
});
이렇게하면 클라이언트에서 보낸 데이트를 받아서 (socket.on) 다시 클라이언트로 보내주게된다. (io.emit)
구글 시크릿모드와 일반모드에서 각각 페이지를 켜서 테스트를 해보면 잘 된다.
io.on('connection', (socket) => {
// 누가 'user-send'이름으로 메세지 보내면 내부 코드실행해주세요..
socket.on('user-send', function (data) {
// io.emit('broadcast', data);
io.to(socket.id).emit('broadcast', data);
});
});
socket.id는 유저가 web socket에 접속을 하면
io.on('connection', (socket) => {
}
위의 socket에 접속유저 정보가 들어있는데 여기서 id를 가져온것이다.
아무튼 위의 코드로 하면 자기한테만 메세지가 전송이된다.
이 기능으로 특정유저에게 메세지를 보낼 수 있는 기능 및 자기에게 메세지보내기 등등 기능을 만들 수 있을것 같다.