기본 콘텐츠로 건너뛰기

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단계 목표 : 채팅방을 적용해서 같은 방에 있는 사람들끼리만 대화하기 

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

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


댓글

이 블로그의 인기 게시물

웹 개발하면서 보안을 유지하기 위한 기본지식

몇개월전에 만들었던 웹기반 (HTML5, CSS3, Flash Player(VideoJS)) VOD플레이어에서 보안이슈가 발생했다. 웹또한 서버를통해 통신을하지만 사용자의 PC에서 실행되는만큼 클라이언트의 개념이 있으며 Javascript 야말로 클라이언트에서 작업하게 되는 영역이라는 점에서 보안상에 이슈 발생.  이유인즉슨  무료로 제공되고 있는것과 유료로 제공되고있는 서비스에 대하여  javascript 단에서 서비스 허용여부를 결정하게될경우  해킹을 통해 이부분을 우회하여 서비스이용이 가능했다는점.. 모든 인증이나, 중요데이터는 java 로 코딩해서 서버단에서 결단이 나도록 했어야했는데 이건 너무 기본적이면서도 아쉬운 실수를 저지르고 말았다..  하하..  많은 분들이 이런 부분을 간과할수도있을듯하여 작성해봅니다.  요즘 보안이슈가 많을탠데 모두들 보안 화이팅 ! 

Android 스마트폰 기본 웹브라우저(Chrome:크롬) 호출하는 스키마(URL Scheme)

신용카드결제 페이지 주소를 카톡으로 던졌을때 카톡 내부에서 결제가 이루어지다보니 결제완료까지 정상적으로 처리되지 않는 경우가 발생한다더라 그래서 생각해본게.. 1) 카카오통 채팅방  2) 링크 전송  3) 링크를 클릭하면 스마트폰애 내장된 웹브라우저를 실행하는 URL스키마 실행  4) 실행된 웹브라우저에서 결제페이지로 이동 이 절차를 거치면 카톡 외부로 나와서 독립적인 웹브라우저상에서 결제를 진행하기때문에 정상처리가 가능할것이라고 판단 찾다 찾다가.. 알아낸것이 안드로이드 (가능) - 롤리팝부터 크롬 브라우저가 기본앱이다 - 크롬을 호출방법 intent://www.naver.com#Intent;scheme=http;package=com.android.chrome;end  아이폰 (조건부 가능) - 사파리를 호출하는 앱스키마가 없으며, 사파리를 통해서 검색어를 입력한 검색기능만 가능 - 크롬브라우저 앱이 설치되어있을경우 아래와같이 호출 가능 googlechrome:////www.naver.com <사용법> < html > < body > < script >      var currentOS = "else" ;      var mobile = ( /iphone | ipad | ipod | android/ i .test(navigator.userAgent.toLowerCase()));      if (mobile) {          var userAgent = navigator.userAgent.toLowerCase();          if (userAgent.search( "android" ) > - 1 )             currentOS = "android" ;          else if

flutter showDatePicker locale 설정을 통해 한국어로 표현되게 하는방법

제목 그대로.. showDatePicker 를 사용하면 아래와같은 형태로 사용할수가 있는데 Future<Null> _selectDate(BuildContext context) async { final DateTime picked = await showDatePicker( context: context , initialDate: selectedDate , firstDate: DateTime ( 2015 , 8 ) , lastDate: DateTime ( 2101 ) , initialDatePickerMode: DatePickerMode. year , //locale : const Locale('kr') ) ; if (picked != null && picked != selectedDate) setState(() { selectedDate = picked ; debugPrint( "_selectDate" ) ; debugPrint(selectedDate.toString()) ; }) ; } 위 소스처럼 locale을 직접 할당하면 datePicker 로딩부터 실패한다 그래서 해결방법을 찾아본 결과 아래와같이 MyApp에서 locale설정을 해주면 이곳에 설정한 locale옵션을 따라서 datepicker의 언어설정이 바뀌게된다 class MyApp extends StatelessWidget { @override Widget build (BuildContext context) { return MaterialApp ( title: 'Flutter Demo