第十三章：基于socket.io实现即时通信

安装好环境，请参考ionic环境搭建之windows篇和 ionic环境搭建之OS X篇。

服务器端的搭建参考socket io官网，里面有非常详细的描述，按照步骤下来，最终可以在localhost进行模拟聊天。

下面是手机端的说明。

引入socket.io.js：

<script src="js/socket.io.js"></script>

定义Chats tab：

  <!-- Chats Tab -->

  <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">

    <ion-nav-view name="tab-chats"></ion-nav-view>

  </ion-tab>

定义tab-chat.html：

<ion-view view-title="Chats">

<ion-content overflow-scroll="true" style="overflow: hidden">

<ion-scroll zooming="true" direction="y" style=" height:500px;" >

    <ion-list>

      <uib-alert ng-repeat="msgInfo in messages" type="{{msgInfo.type}}" close="closeAlert($index)">{{msgInfo.msgType}}: {{msgInfo.msg}}</uib-alert>

    </ion-list>

</ion-scroll>

    <div class="bar bar-footer">

       <label class="item item-input" style=" width:85%">

          <input type="text" placeholder="please add your message here" ng-model="msg"></input>

      </label>

      <button class="button button-positive" ng-click="send(msg)">Send</button>

    </div>

  </ion-content>

  </ion-view>

在app.js中定义chats的state：

  .state('tab.chats', {

      url: '/chats',

      views: {

        'tab-chats': {

          templateUrl: 'templates/tab-chats.html',

          controller: 'ChatsCtrl'

        }

      }

    })

定义ChatsCtrl：

.controller('ChatsCtrl', function ($scope,mediaPlayer, chats) {

    $scope.messages = [];

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

        var msgInfo = { msg: msg, type: 'warning',msgType:"Receiver" }

        $scope.messages.push(msgInfo);

        console.log('receive msg from others: ' + msg);

    });

    $scope.send = function (msg) {

        var msgInfo = { msg: msg, type: 'success', msgType: "Sender" }

        $scope.messages.push(msgInfo);

        console.log('start to send msg: ' + msg);

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

    };

    $scope.closeAlert = function (index) {

        $scope.messages.splice(index, 1);

    };

})

实现factory：

var baseUrl = 'http://localhost:3000/';

.factory('chats', function socket($rootScope) {

  var socket = io.connect(baseUrl);

  return {

    on: function (eventName, callback) {

      socket.on(eventName, function () {

        var args = arguments;

        $rootScope.$apply(function () {

          callback.apply(socket, args);

        });

      });

    },

    emit: function (eventName, data, callback) {

      socket.emit(eventName, data, function () {

        var args = arguments;

        $rootScope.$apply(function () {

          if (callback) {

            callback.apply(socket, args);

          }

        });

      })

    }

  };

})

参考资料：

https://github.com/jbavari/ionic-socket.io-redis-chat

http://jbavari.github.io/blog/2014/06/17/building-a-chat-client-with-ionic/

http://socket.io/get-started/chat/

巴特西

第十三章：基于socket.io实现即时通信

最新文章

热门文章