전공/실무

[Nodejs] 소켓(socket.io) 연동

하루는노력 2018. 4. 3. 10:32
728x90
반응형
즘 Node 개발에 푹 빠져있습니다.
거의 1년 동안 Node, angular, bootstrap으로 뚝딱뚝딱하고 있으니,,, 
참 재미있고 새로운 장난감이라고 생각하고 있죠.

그래서 개인적으로 가지고 있는 소스 하나를 공유하려고 합니다.
소켓 연동 부분인데 아주 기초적인 부분이고
소켓은 잘 알다시피 연결을 보장해줘야 하기 때문에 서버 구축도 신경을 많이 써야 합니다~


아래 소스는 실무에서 그대로 쓸 수 있는 귀한 소스 이다.

그대로 복사해서 돌리면서 Debug를 해보면 쉽게 알 수 있을 것이다.

주석도 함께 달았으니 ;-)


#socketio.js
// 모듈을 추출합니다.
const socketIO = require('socket.io');
const express = require('express');
const http = require('http');

//객체를 선언합니다.
const app = express();
const server = http.createServer(app);
const io = socketIO.listen(server);

//미들웨어를 설정합니다.
app.use(express.static(`${__dirname}/public`));

//웹 소켓을 설정합니다.
io.sockets.on('connection', (socket) => {
setInterval(() => {
socket.emit('abcd', {
mesaage: 'From Server'
});
socket.on('abcd', (data) => {
console.log(data);
});
}, 1000);
});

//서버를 실행합니다.
server.listen(3389, () => {
console.log('Server Running 3389');
});

${__dirname}/public/HTMLPage.html
<!DOCTYPE html>
<html>
<head>
<title>Socket.io Basic</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<script>
//변수를 선언합니다.
var socket = io.connect();

setInterval(() => {
socket.emit(('abcd'), {
message: 'From Client'
});
socket.on('abcd', (data) => {
console.log(data);
});
}, 1000);
</script>
</body>
</html>

#socketioJoin.js
//모듈을 추출합니다.
const socketIO = require('socket.io');
const express = require('express');
const http = require('http');

//객체를 선언합니다.
const app = express();
const server = http.createServer(app);
const io = socketIO.listen(server);

//미들웨어를 설정합니다.
app.use(express.static(`${__dirname}/public`));

//웹 소켓을 설정합니다.
io.sockets.on('connection', (socket) => {
//변수를 선언합니다.
let roomNae = null;

//클라이언트를 방에 배정합니다.
socket.on('joinABCD', (data) => {
roomName = data.roomName;
socket.join(data.roomName);
});

//클라이언트에서 데이터가 전달되면, 배분합니다.
socket.on('message', (data) => {
io.sockets.in(roomName).emit('message', {
message: 'From Server'
});
});
});

//서버를 실행합니다.
server.listen(3389, () => {
console.log('Server Running 3389');
});

${__dirname}/public/HTMLJoinPage.html
<!DOCTYPE html>
<html>
<head>
<title>Socket.io Basic</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<button id="my_button">Click</button>
<script>
//변수를 선언합니다.
var socket = io.connect();
var roomName = prompt('방 이름을 입력해주세요.', '');

//클라이언트를 방에 배정합니다.
socket.emit('joinABCD', {
roomName: roomName
});

//버튼을 클릭하면 문자열을 전달합니다.
var button = document.getElementById('my_button');
button.onclick = function (){
socket.emit('message', {
message: 'From Client'
});
};

//소켓 이벤트를 연결합니다.
socket.on('message', function(data){
alert(data.message);
});
</script>
</body>
</html>


반응형
LIST

'전공 > 실무' 카테고리의 다른 글

[Linux] CentOS 리눅스 명령어  (0) 2018.04.12
[Nodejs] 난독화, 복호화(암호화)  (0) 2018.04.12
Nodejs 외부모듈  (0) 2018.02.08
[flash]drag&drop  (0) 2012.12.06
[flash]flash.external.ExternalInterface.call, 함수  (0) 2012.12.06