기본 콘텐츠로 건너뛰기

node.js + socket.io 사용한 초간단 채팅 예제

1단계 목표 : node.js 로 채팅서버를 구현하여 연결된 클라이언트들에게 채팅메시지 broadcasting 


2단계 목표 : 채팅방을 적용해서 같은 방에 있는 사람들끼리만 대화하기 



참고 사이트 : http://socket.io/docs/


0단계 개발환경 구축 

정말 친절하게 최초 구축 과정부터 알려드리겠습니다. (저는 CentOS 에서 작업했슴다)


node.js 설치 (아래 과정을 순서대로 따라하시면 됨다)


>> 우선 필요한 라이브러리를 설치 
sudo yum install gcc gcc-c++ openssl-devel curl make

>> node.js 다운로드

>> node.js 압축 해제 

>> 디렉토리 이동

>> 설치환경 설정 
./configure --prefix=/opt/node-v0.12.0

>> 컴파일 및 설치
make && make install

>> 환경변수 설정
vi /etc/profile
export PATH=$PATH:/opt/node-v0.12.0/bin    왼쪽 내용 추가 후 저장
source /etc/profile                                 환경변수 설정내용 적용
node -v                                             명령을 통해 버전정보가 나오면 정상적용 된것이다.


>> node.js 설치 정상적으로 됐는지 테스트 

node    입력 (node.js 실행)

>        이 표시가 있을탠데 여기에  console.log("hello ~ ");    입력후 엔터하면 출력될것이다. 그럼 작동하는것임

>> 작업할 디렉토리를 하나 만들고 ~ (저는 /home/testapp  이라고 만들어보겠음다)
mkdir /home/testapp

>> 작업 디렉토리로 이동 ~ 
cd /home/testapp

>> package.json 작성 (왜 작성하느냐? 작성해보면 알꺼에요)
vi package.json    (이 명령으로 편집기를 열고 아래 내용 작성 후 저장)
{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "dependencies": {
    "express": "^4.10.2",
    "socket.io": "^1.3.4"
  }
}

>> npm설치
 
-- socket.io 와 express 는 서버가 될 js 파일이 있는 위치에서 설치를 수행하며 (지금 강좌에서는 /home/testapp 위치가 되겠지요 ? )
-- 설치명령에 포함된 save 는 package.json 에 버전정보가 적용되게 하려고 하기 위함 
-- socket.io 설치
npm install --save socket.io

-- express 설치 (root 계정으로..)
npm install --save express@4.10.2
npm -g install express supervisor

-- express 명령이 먹히지 않을땐 아래 명령 수행
npm install -g express-generator


1단계 (node.js 로 채팅서버를 구현하여 연결된 클라이언트들에게 채팅메시지 broadcasting )


0단계를 잘 따라햇따면 /home/testapp 안에는   node_modules 디렉토리와, package.json 파일이 있을것이다. 

이제 여기에 index.js 라는 서버를 작성해보자 

우선 vi 편집기로 파일을 열고 ~ 

vi index.js 


아래 내용 작성 및 저장 ! 

[서버 소스 : index.js]

var app = require('express')();

var http = require('http').Server(app);

var io = require('socket.io')(http);


app.get('/', function(req, res){

  res.sendFile(__dirname + '/index.html');

});


io.emit('some event',{for:'everyone'});


io.on('connection',function(socket){

  console.log('a user connected');

  

  socket.on('disconnect', function(){

    console.log('user disconnected');

  });


  socket.on('chat message',function(msg){

    console.log('message: ' + msg);

    io.emit('chat message', msg);

  });


});


http.listen(80, function(){

  console.log('listening on *:80');

});


이제 client  작성

[클라이언트 소스 : index.html]

<!doctype html>

<html>

  <head>

    <title>Socket.IO chat</title>

    <style>

      * { margin: 0; padding: 0; box-sizing: border-box; }

      body { font: 13px Helvetica, Arial; }

      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }

      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }

      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }

      #messages { list-style-type: none; margin: 0; padding: 0; }

      #messages li { padding: 5px 10px; }

      #messages li:nth-child(odd) { background: #eee; }

    </style>

  </head>

  <body>

    <ul id="messages"></ul>

    <form action="">

      <input id="m" autocomplete="off" /><button>Send</button>

    </form>

    

    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>

    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>

    <script>

      var socket = io();

      $('form').submit(function(){

        socket.emit('chat message', $('#m').val());

        $('#m').val('');

        return false;

      });

      socket.on('chat message', function(msg){

        $('#messages').append($('<li>').text(msg));

      });

    </script>

  </body>

</html>



실행해볼라우 ? 


node index.js     라고 치면  서버가 실행되고 80포트로 연결 요청을 대기타고있을것이오 


그럼 그대는 ? 크롬을 열고 (IE 는 싫어..막싫어 )

크롬에 80 포트로 주소를 때리세요 그리고 채팅을 해보시요 ~ 서버에 뜨는 로그도 봐가면서 ㅎㅎ 


그럼 이제 

2단계 목표 : 채팅방을 적용해서 같은 방에 있는 사람들끼리만 대화하기 

는..... 지금 좀 피곤해서.. 나중에 작성해볼랍니다 

혹 궁금하신분은 댓글 남겨주시면 .. 빠른 시일내로..작성해보겠슴돠 


댓글

이 블로그의 인기 게시물

리눅스 부팅시 스크립트 실행하기

서버를 끄고 켤때  실행되어야할 명령 혹은 프로세스들이 있을것이다. 이것들을 서버를 켜고 매번 직접 실행시켜준다면 누락의 위험도 잇고.. 번거롭기도 하고  그리하여  윈도우즈에서 시작프로그램에 등록하면 컴퓨터가 다 켜졌을때 알아서 실행해주듯이 리눅스에도 이와같은 기능이 있다.  ============================================================= 기본배경지식 리눅스는 부팅이되면서  런레벨에 맞는 작업을 수행하며  각 런레벨의 작업은 아래와 같이 분리된다.  /etc/rc.d/rc0.d           runlevel 0 /etc/rc.d/rc1.d             runlevel 1 /etc/rc.d/rc2.d             runlevel 2 /etc/rc.d/rc3.d             runlevel 3 /etc/rc.d/rc4.d             runlevel 4 /etc/rc.d/rc5.d             runlevel 5 /etc/rc.d/rc6.d             runlevel 6 /etc/rc.d/rc.local         모든 부팅작업이 완료된 다음 마지막에 수행  ============================================================= 부팅시 스크립트 실행하기  방법 1. 난이도 (하),  rc.local 에 등록하기. rc.local 을 편집기로 열어서  vi  /etc/rc.d/rc.local    실행하고자 하는 스크립트를 작성  톰캣을 실행한다고 했을때 예제 : su - root -c /tomcat/bin/startup.sh  위에서 root 부분은 사용자계정으로 실행하고싶을 시 사용자계정을 적용해주면 되고.. 뒤에 톰캣 startup.sh 경로는 본인에 상황에 맞는 경로로 ~  방법 2. 난이도 (중) 서비스로 등록하기  방법2는 .. 조금 내용도 길고 이해가 필요하므로 잘 정리되어있는 이곳을 참조하자.  http

Redhat 7, CentOS 7 이상버전의 locale 설정 (언어설정)

레드햇과, 센트오에스 6점대 버전까지는 /etc/sysconfig/i18n 이곳에 인코딩설정을 해서 처리했었지만 7부터는 i18n을 사용하지 않는다. 필요할법한 명령어들을 정리해봤으니 참고해서 사용하면 되겠다. 1. 현재 언어셋팅상태 확인 env |grep -e LANG -e LC 또는 locale 2. 시스템에서 지원 가능한 캐릭터셋 확인 localectl list-locales 3. 콘솔명령어를 통해 locale설정 변경 localectl set-locale LANG={적용할 캐릭터셋} ex) localectl set-locale LANG=ko_KR.euckr 4. 캐릭터셋 수동설정 vi /etc/locale.conf 로 파일을 연다음 아래 내용을 작성 LANG={적용할 캐릭터셋} ex) LANG=ko_KR.euckr 설정 완료후 재부팅시 locale명령을 통해 원하는 캐릭터셋이 유지되는지 확인

vscode (visual studio code) 한글 인코딩 설정

1. 파일 -> 기본설정 -> 설정 에서 나오는 설정화면 우측에 아래 두개 내용을 추가 "files.encoding" : "EUC-KR" , "files.autoGuessEncoding" : true 위에는 항상 EUC-KR 로 인코딩하겠다는 기본설정을 바꾸는 내용이며 아래는 현재 파일에 알맞은 인코딩을 알아서 찾겠다는 내용이라고 한다 끝 !