基于WebSocket构建移动端实时应用

对于传统的网络应用,大部分情况下使用的是Http短连接,这意味着你发送一次请求,服务器给你返回响应信息,然后连接就被断掉了。然而现实生活 中,很多应用实际上是需要一种实时机制的支持,比如微信,你就需要实时收到对方发送的回复信息。

前言

对于传统的网络应用,大部分情况下使用的是Http短连接,这意味着你发送一次请求,服务器给你返回响应信息,然后连接就被断掉了。然而现实生活 中,很多应用实际上是需要一种实时机制的支持,比如微信,你就需要实时收到对方发送的回复信息。对于应用处于后台的情况下,你可以使用系统级别的推送服 务,比如iOS下的APNS和Android下的GCM。应用处于前台时呢,则需要自己去和服务端建立一个Http长连接或者轮询,这种方式对于服务器的性能要求还是比较高的。HTML5中提出了一种新的双向通信协议--WebSocket,本文尝试采用这种技术来实现以上的实时推送功能。

WebSocket

WebSocket是HTML5开始提供的一种在客户端和服务器间持久连接的双向通信网络技术。 WebSocket通信协议于2011年被IETF定为标准 RFC 6455,WebSocketAPI被W3C定为标准。协议本身使用新的ws://URL格式,但它是在标准HTTP上实现的。通过使用HTTP和 HTTPS端口,它避免了从Web代理后的网络连接站点时引入的各种问题。HTML5规范不只描述了协议本身,还描述了使用WebSocket编写客户端 代码所需要的浏览器API。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

服务端实现

服务端采用了Facebook开源的Tornado框架,由于Tornado原生支持WebSocket协议,用它来实现服务端非常方便。

Tornado在WebSocket模块中提供了一个WebSocketHandler类。这个类提供了和已连接的客户端通信的WebSocket 事件和方法的钩子。当一个新的WebSocket连接打开时,open方法被调用,而on_message和on_close方法分别在连接接收到新的消 息和客户端关闭时被调用。

此外,WebSocketHandler类还提供了write_message方法用于向客户端发送消息,close方法用于关闭连接。

以开关状态改变检测为例,服务端部署的代码如下:

  1. class Switch(BaseModel):
  2. __tablename__ = ‘switch‘
  3. id = Column(Integer, primary_key = True)
  4. name = Column(String(30))
  5. status = Column(Boolean, server_default = text(‘False‘)) #开关当前状态
  6. level = Column(Integer)                                  #最小可操作等级
  7. callbacks = []
  8. @classmethod
  9. def register(cls, callback):
  10. cls.callbacks.append(callback)
  11. @classmethod
  12. def unregister(cls, callback):
  13. cls.callbacks.remove(callback)
  14. def notifyCallbacks(self):
  15. for callback in self.callbacks:
  16. callback(self.id,self.status)

以上是封装的开关对象,使用了SQLAlchemy作为ORM,其中BaseModel是继承自declarative_base。 定义了两个类方法,分别是注册和移除回调,另外一个实例方法来通知回调。

对外处理请求的handler:

  1. class GetSwitchStatusHandler(BaseWebsockHandler):
  2. def open(self):
  3. Switch.register(self.callback)
  4. def on_close(self):
  5. Switch.unregister(self.callback)
  6. def on_message(self,msg):
  7. pass
  8. def callback(self,switch_id,status):
  9. self.write_message(‘{"switch_id":"%s","status":"%d"}‘%(switch_id,status))

BaseWebsockHandler继承自tornado.websocket.WebSocketHandler,在initialize中对于SQLAlchemy的session进行了初始化

由于在本例中不需要取客户端的上行消息,故直接pass调了on_message方法。callback方法则用来处理回调,将改变后的开关信息返回给客户端。

客户端实现

客户端使用了Square开源的SocketRocket

在iOS工程中安装可以直接使用源码,也可以用CocoaPods安装,将以下依赖加入到PodFile中,再执行install命令即可

pod ‘SocketRocket‘, ‘~> 0.3.1-beta2‘

SocketRocket的核心是SRWebSocket这个类,需要在使用WebSocket连接的ViewController中实现SRWebSocketDelegate。

  1. - (void)connect{
  2. webSocket.delegate = nil;
  3. [webSocket close];
  4. webSocket = [[SRWebSocket alloc] initWithURLRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:SWITCH_STATUS_URL]]];
  5. webSocket.delegate = self;
  6. NSLog(@"Opening Connection...");
  7. [webSocket open];
  8. }
  9. ···
  10. pragma mark - SRWebSocketDelegate
  11. - (void)webSocketDidOpen:(SRWebSocket *)webSocket;{
  12. NSLog(@"Websocket Connected");
  13. }
  14. - (void)webSocket:(SRWebSocket *)webSocket didFailWithError:(NSError *)error;{
  15. NSLog(@":( Websocket Failed With Error %@", error);
  16. webSocket = nil;
  17. }
  18. - (void)webSocket:(SRWebSocket *)webSocket didReceiveMessage:(id)message;{
  19. NSLog(@"Received \"%@\"", message);
  20. }
  21. - (void)webSocket:(SRWebSocket *)webSocket didCloseWithCode:(NSInteger)code reason:(NSString *)reason wasClean:(BOOL)wasClean;{
  22. NSLog(@"WebSocket closed");
  23. webSocket = nil;
  24. }

把delegate指向自身,然后调用SRWebSocket中的方法发送请求即可。 收到下行消息会调用didReceiveMessage这个方法,如果需要在请求时携带参数,可以用类似get请求的方法,将请求放在url字符串中。

到此为止WebSocket的基本功能就实现完毕了,完整demo可以参考我的Github

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-25 20:48:58

基于WebSocket构建移动端实时应用的相关文章

springboot 项目==基于websocket的服务端推送消息。

1.创建springboot项目,首先我们还是先引入依赖 <!-- webSocket begin--><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId></dependency><!-- webSocket end--> 2.创建配置类 

使用 HTML5 WebSocket 构建实时 Web 应用

作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket 等等.这其中有"Web 的 TCP "之称的 WebSocket 格外吸引开发人员的注意.WebSocket 的出现使得浏览器提供对 Socket 的支持成为可能,从而在浏览器和服务器之间提供了一个基于 TCP 连接的双向通道.Web 开发人员可以非常方便地使用 WebSocket 构建实时 web 应用,开发人员的手中从此又多了一柄神兵利器.本文首先介绍

使用WebSocket构建实时WEB

为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/3795075.html 1 WebSocket与传统Web实时通信技术 1.1 WebSocket HTTP是一种典型的单工模式.即基于Request/Response的方式与服务器进行交互.HTML5提供了浏览器与服务端的双工通信协议WebSocket. 1.2传统Web实时通信技术 轮询 Comet 长轮询 Flash

Comet技术详解:基于HTTP长连接的Web端实时通信技术

前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events). 关于这4种技术方式的优缺点,请参考<Web端即时通讯技术盘点:短轮询.Comet.Websocket.SSE>.本文将专门讲解Comet技术.(本文同步发布于:http://www.52im.net/thread-334-1-1.html) 学习交流 - 即时通

[转]使用 HTML5 WebSocket 构建实时 Web 应用

HTML5 WebSocket 简介和实战演练 本文主要介绍了 HTML5 WebSocket 的原理以及它给实时 Web 开发带来的革命性的创新,并通过一个 WebSocket 服务器和客户端的案例来充分展示 WebSocket 的强大和易用. 作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket 等等.这其中有“Web 的 TCP ”之称的 WebSocket 格外吸引开发人员的注意.WebSocket 的出现使得浏

基于Salt Event系统构建Master端returner

前置阅读 环境说明 开工 前置配置 编写returner 测试 SaltStack 的 returner 是由minion端主动连接returner完成执行结果的存储, 在部分场景下并不能满足需求. 由于Salt底层已经构建了一套 Event系统, 所有的操作均会产生event. 因此基于Salt Event系统构建Master端returner成为一种可能. 之前已经完成了 SaltStack Event系统监听events测试, 本文将基于Salt Event系统构建Master端retur

基于Storm构建实时热力分布项目实战

详情请交流  QQ  709639943 01.基于Storm构建实时热力分布项目实战 02.以慕课网日志分析为例 进入大数据 Spark SQL 的世界 03.Spring Cloud微服务实战视频课程 04.漫谈spring cloud 与 spring boot 基础架构 05.Java秒杀系统方案优化 高性能高并发实战 06.Java深入微服务原理改造房产销售平台 07.快速上手Linux 玩转典型应用 08.漫谈spring cloud分布式服务架构 09.Java Spring Se

分享基于 websocket 网页端聊天室

博客地址:https://ainyi.com/#/67 有一个月没有写博客了,也是因为年前需求多.回家过春节的原因,现在返回北京的第二天,想想,应该也要分享技术专题的博客了!! 主题 基于 websocket 网页端聊天室 WebSocket 协议是基于 TCP 的一种新的网络协议.它实现了浏览器与服务器全双工 (full-duplex) 通信--允许服务器主动发送信息给客户端. 使用 java 开发后台 需要导入一个jar包:javax.websocket-api-1.0-rc4.jar 后台

基于node.js 的 websocket的移动端H5直播开发

这一篇介绍一下基于node.js 的 websocket的移动端H5直播开发, 下载文章底部的源码,我是用vscode打开, 首先在第一个终端运行 npm run http-server 这个指令是运行http服务,手机端直接运行http://ip:8000/mpegts.html 即可看到推流过来的视频 新起一个终端运行 npm run ws-server,服务启动后,即可以通过ffmpeg进行推流. 推流过程如下: 推流视频文件: ffmpeg -re -i E:\2.mp4   -code