[ ionic 2: socket.io ] 초간단 챗 앱 맛보기

socket.io 를 사용해 초간단 챗 앱 맛보기를 만들어본다.

서버측 프로젝트 생성

앤드포인트로 사용될 서버측 스크립트를 nodejs 로 만든다. 일단, 프로젝트 생성.

$ mkdir socket-server
$ cd socket-server
$ npm init

이렇게 하면 socket-server 폴더안에 package.json 파일이 만들어진다. 프로젝트 루트 위치에서 명령프롬프트에 다음과 같은 명령을 실행하여 필요한 패키지를 설치한다.

$ npm install socket.io --save

socket-server 폴더에 index.js 파일을 생성하고 다음과 같이 적는다.

var io = require('socket.io'),
    http = require('http'),
    server = http.createServer(),
    io = io.listen(server);

io.on('connection', function(socket){
    console.log('User Connected');
    socket.on('message',(msg)=>{
        io.emit('message',msg);
    })
});

server.listen(3000,function(){
    console.log('Server Started.');
});

말그대로 초간단 스크립트다. 실행해본다. 콘솔창에 ‘Server Started’라고 표시될 것이다. 이제 localhost:3000 에서 서버가 가동 중 이다.

$ node index.js

이것으로 서버측은 끝. 다음은 클라이언트 측.

클라이언트 ionic2 프로젝트 생성

socket-server 위치에서 벗어난 다음, ionic 2 프로젝트를 생성한다.

$ cd ../
$ ionic start socket-client blank --v2
$ cd socket-client

 socket.io-client  패키지 설치하기

// typings 를 설치한다.
$ npm install typings --global
// socket.io-client 를 위한 typing를 설치한다.
$ typings install dt~socket.io-client --global --save
// socket.io-client 패키지를 설치한다.
$ npm install socket.io-client --save

socket-client/src/declarartions.d.ts 에 다음을 추가 한다.

declare module 'socket.io-client' {
  var e: any;
  export = e;
}

 클라이언트 사이드 스크립트 작성

socket-client/src/pages/home/home.ts 를 다음과 같이 고쳐준다.

import { Component } from '@angular/core';
import { NgZone } from '@angular/core';

import { NavController } from 'ionic-angular';
import * as io from 'socket.io-client';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  socket: any;
  chats: string[];
  chatinp: string;

  constructor(public navCtrl: NavController, public zone: NgZone) {
    this.chats = [];
    this.chatinp = '';
    this.socket = io('http://localhost:3000');
    this.socket.on('message', (msg) => {
      this.zone.run(() => {
        this.chats.push(msg);
      });
    });
  }
  send(msg) {
    if (msg.trim() != '') {
      this.socket.emit('message', msg);
    }
    this.chatinp = '';
  }
}

socket-client/src/pages/home/home.html 을 다음과 같이 고쳐준다.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let message of chats">{{message}}</ion-item>
    <ion-item>
      <ion-label floating>Enter a Message</ion-label>
      <ion-input type="text" [(ngModel)]="chatinp"></ion-input>
    </ion-item>
    <ion-item>
      <button ion-button color="light" (click)="send(chatinp)">Send</button>
    </ion-item>
  </ion-list>

</ion-content>

이제 실행해본다. 콘솔창에서

$ ionic serve

 

 

댓글 남기기