:基于socket.io实现即时通信

Posted Introspection & Change

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了:基于socket.io实现即时通信相关的知识,希望对你有一定的参考价值。

服务器端的搭建参考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实现即时通信的主要内容,如果未能解决你的问题,请参考以下文章

用于WEB端的即时通讯的框架Socket.IO

Socket.IO介绍:支持WebSocket用于WEB端的即时通讯的框架

SockJS实践:即时通信关键点

学习 Socket.io

Vue中 引入使用 vue-socket.io

Socket.Io与WebSockt