WebSocket
-
Upload
njamnjam -
Category
Technology
-
view
1.049 -
download
1
description
Transcript of WebSocket
![Page 1: WebSocket](https://reader035.fdocuments.in/reader035/viewer/2022081907/54b797704a79590e5e8b457f/html5/thumbnails/1.jpg)
WebSocketTwo-way realtime communication for websites
![Page 2: WebSocket](https://reader035.fdocuments.in/reader035/viewer/2022081907/54b797704a79590e5e8b457f/html5/thumbnails/2.jpg)
Chat on a webpage
“Four times.” “Four times.”
![Page 3: WebSocket](https://reader035.fdocuments.in/reader035/viewer/2022081907/54b797704a79590e5e8b457f/html5/thumbnails/3.jpg)
Chat on a webpage
Requirements:
• Send messages client→server
• Send messages server→client
• Detect when client is connected to server (“presence”)
![Page 4: WebSocket](https://reader035.fdocuments.in/reader035/viewer/2022081907/54b797704a79590e5e8b457f/html5/thumbnails/4.jpg)
Traditional HTTP
XMLHttpRequest(HTTP from JavaScript)
var request = new XMLHttpRequest();request.open("POST", "/send");request.send("Four times.");
Long Polling(Long-running XMLHttpRequest)
var request = new XMLHttpRequest();request.open("GET", "/receive");request.send();request.onload = function() { appendMessage(this.responseText); startNewRequest();};
![Page 5: WebSocket](https://reader035.fdocuments.in/reader035/viewer/2022081907/54b797704a79590e5e8b457f/html5/thumbnails/5.jpg)
Other techniques and problems
• Long-polling HTTP requests: XHR, script-tag
• Streaming HTTP request: XHR, iframe
• Using rtmp with Flash
• Misuse of HTTP (proxies, browsers, servers)
• Performance (network, httpd cpu)
• Not supported in all browsers
![Page 6: WebSocket](https://reader035.fdocuments.in/reader035/viewer/2022081907/54b797704a79590e5e8b457f/html5/thumbnails/6.jpg)
WebSocket
• Full-duplex persistent connection over TCP
• Designed by W3C for the web (RFC Dec. ’11)
• Uses port 80
• Handshake features HTTP’s “Upgrade”-header
• The TLS version passes some HTTP-proxies
• Ping/pong frames for staying alive
![Page 7: WebSocket](https://reader035.fdocuments.in/reader035/viewer/2022081907/54b797704a79590e5e8b457f/html5/thumbnails/7.jpg)
WebSocket JavaScript API
var ws = new WebSocket("wss://host");ws.send("Four times.");ws.send("It has to be.");
var ws = new WebSocket("wss://host");ws.onmessage = function(event) { appendMessage(event.data);};
![Page 8: WebSocket](https://reader035.fdocuments.in/reader035/viewer/2022081907/54b797704a79590e5e8b457f/html5/thumbnails/8.jpg)
Demo
├── README.md├── client-sockjs│ ├── chat.js│ └── index.html├── client-websocket│ ├── chat.js│ └── index.html└── server ├── package.json └── server.js
https://github.com/njam/websocket-demo-chat
![Page 9: WebSocket](https://reader035.fdocuments.in/reader035/viewer/2022081907/54b797704a79590e5e8b457f/html5/thumbnails/9.jpg)
Compatibility
http://caniuse.com/websockets
![Page 10: WebSocket](https://reader035.fdocuments.in/reader035/viewer/2022081907/54b797704a79590e5e8b457f/html5/thumbnails/10.jpg)
Emulation
• WebSocket-like client-API plus server
• Enables realtime-comm. in most used browsers
• SockJS: Node.js, Erlang, Ruby, Python, ..
• Socket.IO: Node.js, Java, Erlang, PHP, .......
• Ratchet: PHP
• APE (C), Atmosphere (Java), Tambur.io (WS), Pusher (WS)
![Page 11: WebSocket](https://reader035.fdocuments.in/reader035/viewer/2022081907/54b797704a79590e5e8b457f/html5/thumbnails/11.jpg)
Server application Integration
1. Same application base:WS-server which reuses your app code
Apache WS Server
Application code
![Page 12: WebSocket](https://reader035.fdocuments.in/reader035/viewer/2022081907/54b797704a79590e5e8b457f/html5/thumbnails/12.jpg)
Server application Integration
2. Message Queue / Service API:Messaging between app and WS server(Redis-SockJS push-only broker: cargomedia/socket-redis)
Apache WS Server
Application code BrokerMessage Queue