Web_developer

Node.js와 socket I/O의 실시간 채팅 구현하기 본문

Linux

Node.js와 socket I/O의 실시간 채팅 구현하기

에잎이 2021. 8. 1. 00:34
반응형

서버 세팅은 centos7 기준으로 작성합니다.


 

리눅스에서 node js를 설치합니다

curl -sL https://rpm.nodesource.com/setup_12.x | sudo bash -
yum install -y nodejs

차례대로 위에 명령어를 콘솔에 입력 합니다.

 

설치가 완료된후 node 버전 확인과 npm 버전 확인을 합니다.

root@centos7:~# node -v
v12.18.1
root@centos7:~# npm -v
6.14.5

정상적으로 설치가 되었다면 버전이 나옵니다.

 

package.json 을 생성하기위해 아래 명령어를 콘솔에 입력합니다.

npm init

위에 명령어를 입력하면,

name

version 등등 을 입력 하라고 합니다.

 

name에 chatting 엔터

version 공백 엔터(기본값 1.0.0)

공백으로 엔터를 치시고

 

main이 나오면 server.js 를 입력합니다.

 

그리고 나머지도 공백 엔터

모두 하였다면 서버에 package.json 이 생성됩니다.

 

package.json 파일을 열어보시면

{
  "name": "chatting",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "socket.io": "^4.1.3"
  }
}

이렇게 나옵니다.

만약 잘못 입력하셨다면 이대로 바꾸시고 저장하셔도 됩니다.

 

그다음 package.json 파일이 있는곳으로 이동합니다.

npm install express socket.io --save

package.json 파일이 있는곳에서 위에 명령어를 콘솔에서 입력합니다.

 

socket.io를 설치했습니다.

 

다음 

client.html 의 파일을 생성하여 다음 코드를 입력합니다.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Chat</title>
        <style>
            .chat_log{ width: 95%; height: 200px; }
            .name{ width: 10%; }
            .message{ width: 70%; }
            .chat{ width: 10%; }
        </style>
    </head>
    <body>
        <div>
            <textarea id="chatLog" class="chat_log" readonly></textarea>
        </div>
        <form id="chat">
            <input id="name" class="name" type="text" readonly>
            <input id="message" class="message" type="text">
            <input type="submit" class="chat" value="chat"/>
        </form>
        <div id="box" class="box">
            <script src="/socket.io/socket.io.js"></script>
            <script src="//code.jquery.com/jquery-1.11.1.js"></script>
            <script>
                var socket = io();
                $('#chat').on('submit', function(e){
                    socket.emit('send message', $('#name').val(), $('#message').val());
                    $('#message').val('');
                    $('#message').focus();
                    e.preventDefault();
                });
                socket.on('receive message', function(msg){
                    $('#chatLog').append(msg+'\n');
                    $('#chatLog').scrollTop($('#chatLog')[0].scrollHeight);
                });
                socket.on('change name', function(name){
                    $('#name').val(name);
                });
            </script>
        </div>
    </body>
    </html>

 

그다음 server.js 파일을 생성하여 다음 코드를 입력합니다.

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/',function(req, res){
  res.sendFile(__dirname + '/client.html');
});

var count=1;
io.on('connection', function(socket){
  console.log('user connected: ', socket.id);
  var name = "user" + count++;
  io.to(socket.id).emit('change name',name);

  socket.on('disconnect', function(){
    console.log('user disconnected: ', socket.id);
  });

  socket.on('send message', function(name,text){
    var msg = name + ' : ' + text;
    console.log(msg);
    io.emit('receive message', msg);
  });
});

http.listen(3000, function(){
  console.log('server on!');
});

3000번대의 포트를사용 하므로, iptables 에서 3000번 포트를 열어주시고 iptables도 재시작 해야합니다.

 

그다음 nodemon를 설치해야합니다.

npm install -g nodemon

다음 명령어를 콘솔에 입력합니다.

 

그다음 nodemon를 실행합니다

nodemon

콘솔에 입력하면, 

[nodemon] 2.0.12
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
server on!

리눅스에 이런 화면이 나온다면 모두 세팅은 모두 끝났습니다.

 

이제 테스트!!

http://도메인:3000 을 입력 하시고 브라우저에 같은창을 두개 열어 놓고 한쪽 브라우저에서 입력하면 다른 브라우저에서 나타납니다.

저작자표시 비영리 변경금지

'Linux' 카테고리의 다른 글

centos7 - nginx + php + mariadb / yum 설치  (0) 2019.08.23
CentOS 7 에서 iptables 방화벽 데몬 사용하기  (0) 2019.07.31
리눅스 Apache 2.4 설치 / CentOS 7 소스설치  (0) 2019.07.31
'Linux' Related Articles more
Comments