Your SlideShare is downloading. ×
Web sockets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web sockets

285
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
285
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 开发Web,MobileWeb & Apps范圣刚安博中程在线
  • 2. Web Sockets持久连接和双向通信
  • 3. Web Sockets 介绍安博中程在线目标:在一个持久连接上提供全双工的双向通信。最开始是以TCPConnection的身份添加到HTML5 规范的, 后来被抽离出来形成了自己的单独的规范。浏览器支持:Firefox 6+, Safari 5+, Chrome和iOS 4以上的Safari。···3/18
  • 4. Web Sockets 协议Web Socket 使用了自定义的协议,而不是HTTP,所以URL模式也略有不同:使用自定义协议而不是HTTP协议的好处是,能够在客户端和服务器之间发送非常少量的数据,因此特别适合移动应用。安博中程在线未加密的连接是ws://加密连接是wss://··4/18
  • 5. Web Sockets API建立连接要创建Web Socket,先实例一个WebSocket 对象并传入要连接的URL:注意:必须给WebSocket 构造函数传入绝对URL路径。安博中程在线varsocket=newWebSocket("ws://www.example.com/server.php"); JAVASCRIPT5/18
  • 6. Web Sockets API关闭连接要关闭Web Socket 连接,可以在任何时候调用close()方法。安博中程在线socket.close(); JAVASCRIPT6/18
  • 7. 连接的建立过程安博中程在线实例化Web Socket 后,浏览器就会马上尝试创建HTTP连接;浏览器发起连接,并取得服务器响应后,建立的连接会从使用HTTP协议升级为Web Socket协议。··7/18
  • 8. 连接状态WebSocket 有一个表示当前状态的readyState 属性:readyState 的值永远从0开始。安博中程在线WebSocket.OPENING(0): 正在建立连接WebSocket.OPEN(1): 已经建立连接WebSocket.CLOSING(2): 正在关闭连接WebSocket.CLOSE(3): 已经关闭连接····8/18
  • 9. 发送简单数据Web Socket 打开之后,就可以通过连接发送和接收数据。发送数据使用send()方法,并传入任意字符串。例如:安博中程在线varsocket=newWebSocket("ws://www.example.com/foobar.php");socket.send("Helloworld!");JAVASCRIPT9/18
  • 10. 发送复杂数据下面的代码是把数据序列化成JSON字符串,再发送到服务器:服务器收到以后,再解析收到的JSON字符串。安博中程在线Web Sockets只能通过连接发送纯文本数据;对于复杂的数据结构,发送前要进行序列化;··varmessage={time:newDate(),text:"HelloWorld!",clientId:"adkeig393g8dk"};socket.send(JSON.stringify(message));JAVASCRIPT10/18
  • 11. 接收数据当服务器向客户端发来消息时,Web Socket 对象会触发message事件。这个message事件同样把返回的数据保存在event.data中。与通过send()发送到服务器的数据一样,event.data中返回的数据也是字符串。大部分情况下也需要手工解析。安博中程在线socket.onmessage=function(event){vardata=event.data;//处理数据};JAVASCRIPT11/18
  • 12. 其他事件在连接生命周期不同阶段触发的其他三个事件(除了message):安博中程在线open: 在成功建立连接时触发error: 发生错误时触发,连接不能持续close: 在连接关闭时触发···12/18
  • 13. 代码:其他事件安博中程在线varsocket=newWebSocket("ws://www.example.com/server.php");socket.onopen=function(){alert("连接建立!");}socket.onerror=function(){alert("连接出错!");}socket.onclose=function(event){console.log("连接关闭!"+"Wasclean?"+event.wasClean+"Code="+event.code+"Reason="}JAVASCRIPT13/18
  • 14. close事件的属性前面的三个事件中只有close事件的event对象有额外的三个属性信息:安博中程在线wasClean是一个布尔值,表示连接是否已经明确的关闭;code 是服务器返回的数值状态码;reason是一个字符串,包含服务器发回的信息。···socket.onclose=function(event){console.log("连接关闭!"+"Wasclean?"+event.wasClean+"Code="+event.code+"Reason="+event.reason);}JAVASCRIPT14/18
  • 15. Demo即时通信聊天室
  • 16. 使用Web Socket 进行即时通信昵称 访客 更改正在连接....连接关闭消息 发送安博中程在线 16/18
  • 17. 扩展阅读安博中程在线Pusher·17/18
  • 18. <Thank you!>Feel free to contact me if you have any question.微博 @范圣刚博客 www.tfan.orggithub github.com/princetoad