클라이언트 코드
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
</head>
<body>
<ul id="messages"></ul>
<input id="m" autocomplete="off" /><button onclick="handleClick()">Send</button>
<!-- 클라이어트 라이브러리는 script tag의 src 어트리뷰트값으로 “/socket.io/socket.io.js”을 지정하면 된다. 실제 path에 socket.io.js 파일을 배치할 필요는 없다. 그 이유는 socket.io가 서버 기동 시에 socket.io.js 라이브러리를 자동 생성해 주기 때문이다. -->
<script src="/socket.io/socket.io.js"></script>
<script>
const $btn = document.querySelector('button');
// socket.io 서버에 접속한다.
// 이 때 생성된 socket으로 서버로의 메시지 송신 또는 서버로부터의 메시지 수신을 할 수 있다.
//기본적으로 페이지를 제공하는 호스트에 연결을 시도함(여기선 localhost)
let socket = io();
socket.emit('login', {
name: makeRandomName(),
userid: 'jing0716@gmail.com'
})
socket.on('login', function (data) {
const $ul = document.querySelector('#messages');
const $li = document.createElement('li');
$li.textContent = data
$ul.append($li);
})
//서버로부터 메시지가 수신되면
socket.on('chat', function(data) {
const $ul = document.querySelector('#messages');
const $li = document.createElement('li');
$li.textContent = data.msg;
$ul.append($li);
})
function handleClick(event) {
event.preventDefault();
const $input = document.querySelector('#m');
const data = $input.value;
console.log(data);
socket.emit("chat", { msg: data});
}
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;
}
$btn.addEventListener('click', handleClick);
</script>
</body>
</html>서버 코드
let app = require('express')();
let http = require('http').createServer(app);
//http server를 socket.io server로 Upgrade한다.
let io = require('socket.io')(http);
//localhost:3000으로 서버에 접속하면 클라이언트로 index.html을 전송
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html'); //리다이렉트 같은 것?
})
// connection이 수립되면 event handler function의 인자로 socket이 들어온다
// socket 객체는 개별 클라이언트와의 interacting을 위한 기본적인 객체
// io 객체는 연결된 전체 클라이언트와의 interacing을 위한 객체
// 현재 접속하고 있는 클라이언트로부터의 메시지를 수신하기 위해서는 on 메소드 사용
// connection이 수립되면 event handler function의 인자로 socket이 들어옴
io.on('connection', (socket) => {
// 접속한 클라이언트의 정보가 수신되면
socket.on('login', (data) => {
console.log('message :' + data )
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);
let msg = {
from: {
name: socket.name,
userid: socket.userid
},
msg: data.msg
};
// 메시지를 전송한 클라이언트를 제외한 모든 클라이언트에게 메시지를 전송
//socket.broadcast.emit('chat', msg);
io.emit('chat', msg);
})
// socket.on('forceDisconnect', function() {
// socket.disconnect();
// })
// socket.on('disconnect', function() {
// console.log('user disconnected: ' + socket.name);
// });
})
http.listen(3000, () => {
console.log("listening on *:3000");
})
즐거운 코딩