趣味的なIT・ネットの話題

ionic2でハイブリッドなアプリ開発:ionic2/Angular2でsocket.ioを使う

Creating a Real Time Chat Application with Ionic 2 and Socket.io

ionic2でsocket.ioを使うにはどうしたら良いかと思い最初に見つけたのがこの記事。ですが、index.htmlでインポートするというのはionic2/angular2の作法に沿っていない様に思われ、もしindex.htmlがアップデートされたときに記述が消失してしまうリスクもあるように思いました。そこでもう少し検索して発見したのがこちら。

How to include socket.io-client · Issue #221 · AngularClass/angular2-webpack-starter

npmでsocket.io-clientというモジュールを入れて、これを呼ぶとのこと。npmからローカルインストールされたものがクライアントのビルドの中に入るのかちょっと不安でしたがやってみたらできました。

npm install socket.io-client --save
typings install socket.io-client --save --ambient

このとおりインストールしてコードを書いてみます。書き方は公式より。

socketio/socket.io-client: Realtime application framework (client)

import {Page, NavController, NavParams} from 'ionic-angular';
import {ItemDetailsPage} from '../item-details/item-details';
import * as io from 'socket.io-client';

@Page({
  templateUrl: 'build/pages/registered-riders-list/registered-riders-list.html'
})
export class registerdRidersList {
  selectedItem: any;
  icons: string[];
  items: Array<{title: string, note: string, icon: string}>;

  constructor(private nav: NavController, navParams: NavParams) {

    var socketio = io('http://localhost:8080');
    socketio.emit('CS_REQ_registerdRiders','');
    socketio.on("SC_RES_registeredRiders", function (data) { console.log(data); });

ちゃんとサーバー側への送信(emit)、サーバー側からの受信(on)、両方が作動しました。


Facebooktwitterpinterestlinkedinmail
納得したらすぐにシェア!