安装好环境,请参考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实现即时通信的更多相关文章

  1. C语言 linux环境基于socket的简易即时通信程序

    转载请注明出处:http://www.cnblogs.com/kevince/p/3891033.html      ——By Kevince 最近在看linux网络编程相关,现学现卖,就写了一个简易 ...

  2. 基于 socket.io 的 AI 服务 杂谈

    为什么会想到来聊下这个话题. 前几天在公司的项目中,开发一个基于 socket.io 的直播 IM 功能. 直播分为两部分,一部分是比较昂贵的 视频推流, 另外一部分是 IM 即时聊天服务. 从这里开 ...

  3. 在线白板,基于socket.io的多人在线协作工具

    首发:个人博客,更新&纠错&回复 是昨天这篇博文留的尾巴,socket.io库的使用练习,成品地址在这里. 代码已经上传到github,传送门.可以开俩浏览器看效果. 现实意义是俩人在 ...

  4. 基于socket.io的实时在线选座系统

    基于socket.io的实时在线选座系统(demo) 前言 前段时间公司做一个关于剧院的项目,遇到了这样一种情况. 在高并发多用户同时选座的情况下,假设A用户进入选座页面,正在选择座位,此时还没有提交 ...

  5. Python基于socket模块实现UDP通信功能示例

    Python基于socket模块实现UDP通信功能示例 本文实例讲述了Python基于socket模块实现UDP通信功能.分享给大家供大家参考,具体如下: 一 代码 1.接收端     import ...

  6. 基于 socket.io, 简单实现多平台类似你猜我画 socket 数据传输

    一.前言 socket.io 实现了实时双向的基于事件的通讯机制,是基于 webSocket 的封装,但它不仅仅包括 webSocket,还对轮询(Polling)机制以及其它的实时通信方式封装成了通 ...

  7. 基于socket.io打造hybrid调试页面

    前言 参考的钉钉调试页面实现,仅供学习! 功能为: PC端编写代码,手机端执行 解决的痛点是: 避免了调试hybrid应用时重复写各种测试页面 源码与示例 源码 https://github.com/ ...

  8. 基于socket.io的实时消息推送

    用户访问Web站点的过程是基于HTTP协议的,而HTTP协议的工作模式是:请求-响应,客户端发出访问请求,服务器端以资源数据响应请求. 也就是说,服务器端始终是被动的,即使服务器端的资源数据发生变化, ...

  9. Node学习笔记(三):基于socket.io web版你画我猜(二)

    上一篇基础实现的功能是客户端canvas作图,导出dataURL从而实现图片信息推送,下面具体讲下服务端的配置及客户端的配置同步 首先先画一个流程图,讲下大概思路 <canvas id=&quo ...

随机推荐

  1. C# 判断一个数是不是奇数/偶数

    一般普通版: private bool IsOdd(int num) { ) == ; } 通过判断取余 现在升级版: private bool IsOdd(int num) { ) == ; } 通 ...

  2. ASP.NET MVC Controller 编程所涉及到的常用属性成员

    Controller (System.Web.Mvc.Controller) 1.获取路由中的各个值 Request.RequestContext.RouteData.Values["id& ...

  3. 笔记本小键盘提示 C#

    穷人家的孩子,买了个笔记本愣是没有小键盘提示灯. 牛的是人家给了一个大写提示灯. 更牛的是他妈给了音量关闭打开的提示灯,还他妈是橙色的!!!!!! 没办法 弄了小程序 来判断是否打开小键盘了. 本来是 ...

  4. Python的特殊属性和魔法函数

    python中有很多以下划线开头和结尾的特殊属性和魔法函数,它们有着很重要的作用. 1.__doc__:说明性文档和信息,python自建,不需要我们定义. # -*- coding:utf- -*- ...

  5. day1学python Hello Python

    Hello Python 本人使用的是Pycharm编译器 ----------------------------------------------- 1.输出 2.赋值 3.‘’‘/“”“ 多行 ...

  6. day08.1-Linux软件包管理

    Linux系统中的两种软件包:tar,保存内容为源码,编译后再安装:rpm,保存内容为编译后的机器码,直接安装.其中,rpm软件包由5部分构成,分别为: 第1部分是name,表示这个rpm软件包的名称 ...

  7. 【ARC080F】Prime Flip 差分+二分图匹配

    Description ​ 有无穷个硬币,初始有n个正面向上,其余均正面向下.  你每次可以选择一个奇质数p,并将连续p个硬币都翻转.  问最小操作次数使得所有硬币均正面向下. Input ​ 第一行 ...

  8. django 部署到Ubuntu安装MYSQL56

    阿里云 Ubuntu 14.04 安装mysql 5.6 1.升级apt-get sudo apt-get update 2. 安装mysql5.6版本 apt-get install mysql-s ...

  9. sql 面试题记录

    一张学生表,字段 :学生ID,学生课程,学生成绩 问:每门课程前三名的学生信息? create table student ( id ), --编号 class ),--课程 soure int -- ...

  10. ionic4 refresh组件位置变更:Ignored attempt to cancel a touchmove event with cancelable=false

    io3 中 refresh组件位置可不定: io4 中 须置顶,否则报错,此外complete方法的调用位置改为target属性 参考:https://github.com/ionic-team/io ...