socket.io를 이용해서 실시간 채팅 구현하기
서버 코드
//index.js
var app = require('express')();
var server = require('http').createServer(app);
// http server를 socket.io server로 upgrade한다
var io = require('socket.io')(server);
// localhost:3000으로 서버에 접속하면 클라이언트로 index.html을 전송한다
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
// connection event handler
// connection이 수립되면 event handler function의 인자로 socket인 들어온다
io.on('connection', function(socket) {
// 접속한 클라이언트의 정보가 수신되면
socket.on('login', function(data) {
console.log('Client logged-in:\n name:' + data.name + '\n userid: ' + data.userid);
// socket에 클라이언트 정보를 저장한다
socket.name = data.name;
socket.userid = data.userid;
// 접속된 모든 클라이언트에게 메시지를 전송한다
io.emit('login', data.name );
});
// 클라이언트로부터의 메시지가 수신되면
socket.on('chat', function(data) {
console.log('Message from %s: %s', socket.name, data.msg);
var msg = {
from: {
name: socket.name,
userid: socket.userid
},
msg: data.msg
};
// 메시지를 전송한 클라이언트를 제외한 모든 클라이언트에게 메시지를 전송한다
socket.broadcast.emit('chat', msg);
// 메시지를 전송한 클라이언트에게만 메시지를 전송한다
// socket.emit('s2c chat', msg);
// 접속된 모든 클라이언트에게 메시지를 전송한다
// io.emit('s2c chat', msg);
// 특정 클라이언트에게만 메시지를 전송한다
// io.to(id).emit('s2c chat', data);
});
// force client disconnect from server
socket.on('forceDisconnect', function() {
socket.disconnect();
})
socket.on('disconnect', function() {
console.log('user disconnected: ' + socket.name);
});
});
server.listen(3000, function() {
console.log('Socket IO server listening on port 3000');
});클라이언트 코드
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Socket.io Chat Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Socket.io Chat Example</h3>
<form class="form-inline">
<div class="form-group">
<label for="msgForm">Message: </label>
<input type="text" class="form-control" id="msgForm">
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
<div id="chatLogs"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function(){
// socket.io 서버에 접속한다
var socket = io();
// 서버로 자신의 정보를 전송한다.
socket.emit("login", {
// name: "ungmo2",
name: makeRandomName(),
userid: "ungmo2@gmail.com"
});
// 서버로부터의 메시지가 수신되면
socket.on("login", function(data) {
$("#chatLogs").append("<div><strong>" + data + "</strong> has joined</div>");
});
// 서버로부터의 메시지가 수신되면
socket.on("chat", function(data) {
$("#chatLogs").append("<div>" + data.msg + " : from <strong>" + data.from.name + "</strong></div>");
});
// Send 버튼이 클릭되면
$("form").submit(function(e) {
e.preventDefault();
var $msgForm = $("#msgForm");
// 서버로 메시지를 전송한다.
socket.emit("chat", { msg: $msgForm.val() });
$msgForm.val("");
});
function makeRandomName(){
var name = "";
var possible = "abcdefghijklmnopqrstuvwxyz";
for( var i = 0; i < 3; i++ ) {
name += possible.charAt(Math.floor(Math.random() * possible.length));
}
return name;
}
});
</script>
</body>
</html>index.js실행시
res.sendFile(__dirname + "/index.html")
로 요청된곳에 index.html을 보내줘서 클라이언트를 랜더시킨다
옵션으로
// 메시지를 전송한 클라이언트를 제외한 모든 클라이언트에게 메시지를 전송한다
// socket.broadcast.emit("chat", msg);
// 메시지를 전송한 클라이언트에게만 메시지를 전송한다
// socket.emit("s2c chat", msg);
// 접속된 모든 클라이언트에게 메시지를 전송한다
io.emit("s2c chat", msg);
// 특정 클라이언트에게만 메시지를 전송한다
// io.to(id).emit('s2c chat', data);귓속말과 같은 옵션도 줄 수 있다
socket.io 활용
18.5일차 / socket.io 적용
socket.io에 대해 내가 쓴 글 https://fullfish.tistory.com/115 socket.io socket.io를 이용해서 실시간 채팅 구현하기 서버 코드 //index.js var app = require('express')(); var server = require('http').cre..
fullfish.tistory.com
'코딩 공부 > 공부' 카테고리의 다른 글
| 환경변수 사용법 (react, webpack, aws) (0) | 2022.06.02 |
|---|---|
| **연산자에대한 고찰 (1) | 2022.05.31 |
| 구글 맵 API (0) | 2022.05.15 |
| 정규표현식의 capture, group (0) | 2022.05.09 |
| node-cron을 이용한 schedule (0) | 2022.05.05 |