WebSockets (confoo)

Transcript

1. WEBSOCKETS Friday, March 2, 12
2. • phpBB • Symfony2 • Silex • Composer igorw @igorwesome Friday, March 2, 12
3. Friday, March 2, 12
4. Friday, March 2, 12
5. WEBSOCKETS Friday, March 2, 12
6. WEB Friday, March 2, 12
7. Application HTTP Presentation TCP Session TCP Transport TCP Network IP Data Link Physical Friday, March 2, 12
8. Application HTTP Presentation TCP Session TCP Transport TCP Network IP Data Link Physical Friday, March 2, 12
9. HTTP Friday, March 2, 12
10. client Friday, March 2, 12
11. request client Friday, March 2, 12
12. reponse client request Friday, March 2, 12
13. THIS IS A GOOD THING Friday, March 2, 12
14. BUT Friday, March 2, 12
15. NOT FOR EVERYTHING Friday, March 2, 12
16. UNIDIRECTIONAL Friday, March 2, 12
17. Friday, March 2, 12
18. LATENCY Friday, March 2, 12
19. STATELESS Friday, March 2, 12
20. Application HTTP Presentation TCP Session TCP Transport TCP Network IP Data Link Physical Friday, March 2, 12
21. Application HTTP Presentation TCP Session TCP Transport TCP Network IP Data Link Physical Friday, March 2, 12
22. WEBSOCKETS Friday, March 2, 12
23. SOCKETS Friday, March 2, 12
24. WEBSOCKETS Friday, March 2, 12
25. PROTOCOL API Friday, March 2, 12
26. THE WEBSOCKET PROTOCOL Friday, March 2, 12
27. browser Friday, March 2, 12
28. Friday, March 2, 12
29. Friday, March 2, 12
30. Friday, March 2, 12
31. • Handshake / Upgrade • TCP • Proxies • Supports TLS (SSL) Friday, March 2, 12
32. Friday, March 2, 12
33. RFC 6455 Friday, March 2, 12
34. COMET Friday, March 2, 12
35. THE WEBSOCKET API Friday, March 2, 12
36. browser Friday, March 2, 12
37. Friday, March 2, 12
38. var ws = new WebSocket('ws://example.org:8080/updates'); ws.onopen = function () { ws.send('hello'); }; ws.onmessage = function (message) { console.log(message.data); }; Friday, March 2, 12
39. JS INTERFACE • WebSocket • onopen • onmessage • onerror • onclose • binaryType • MessageEvent • data Friday, March 2, 12
40. browser API PROTOCOL Friday, March 2, 12
41. Friday, March 2, 12
42. • built on node.js • abstracts socket communication • supports fallback transports Friday, March 2, 12
43. • session storage • namespacing • acknowledgement • broadcasting • reconnection Friday, March 2, 12
44. • json serialization • heartbeats • connection ids • io.sockets collection Friday, March 2, 12
45. 4.0+ (2009) 6.0+ (2011) 10.70+ (2012) 5.0+ (2010) 10+ (2012) BROWSER SUPPORT Friday, March 2, 12
46. 4.0+ 3.0+ 10.61+ 3.0+ 5.5+ WITH SOCKET.IO Friday, March 2, 12
47. Friday, March 2, 12
48. Y U NO PHP? Friday, March 2, 12
49. Friday, March 2, 12
50. Friday, March 2, 12
51. $context = new ZMQContext(); $sock = $context->getSocket(ZMQ::SOCKET_PUB); $sock->connect('tcp://127.0.0.1:5555'); $msg = json_encode([ 'type' => 'debug', 'data' => ['foo', 'bar', 'baz'] ]); $sock->send($msg); Friday, March 2, 12
52. $context = new ZMQContext(); $sock = $context->getSocket(ZMQ::SOCKET_PUB); $sock->connect('tcp://127.0.0.1:5555'); $msg = json_encode([ 'type' => 'debug', 'data' => ['foo', 'bar', 'baz'] ]); $sock->send($msg); Friday, March 2, 12
53. $context = new ZMQContext(); $sock = $context->getSocket(ZMQ::SOCKET_PUB); $sock->connect('tcp://127.0.0.1:5555'); $msg = json_encode([ 'type' => 'debug', 'data' => ['foo', 'bar', 'baz'] ]); $sock->send($msg); Friday, March 2, 12
54. $context = new ZMQContext(); $sock = $context->getSocket(ZMQ::SOCKET_PUB); $sock->connect('tcp://127.0.0.1:5555'); $msg = json_encode([ 'type' => 'debug', 'data' => ['foo', 'bar', 'baz'] ]); $sock->send($msg); Friday, March 2, 12
55. Friday, March 2, 12
56. var io = require('socket.io').listen(8080), zmq = require('zmq'), sock = zmq.socket('sub'); sock.subscribe(''); sock.bind('tcp://*:5555'); sock.on('message', function (msg) { var event = JSON.parse(msg); io.sockets.emit(event.type, event.data); }); Friday, March 2, 12
57. var io = require('socket.io').listen(8080), zmq = require('zmq'), sock = zmq.socket('sub'); sock.subscribe(''); sock.bind('tcp://*:5555'); sock.on('message', function (msg) { var event = JSON.parse(msg); io.sockets.emit(event.type, event.data); }); Friday, March 2, 12
58. var io = require('socket.io').listen(8080), zmq = require('zmq'), sock = zmq.socket('sub'); sock.subscribe(''); sock.bind('tcp://*:5555'); sock.on('message', function (msg) { var event = JSON.parse(msg); io.sockets.emit(event.type, event.data); }); Friday, March 2, 12
59. var io = require('socket.io').listen(8080), zmq = require('zmq'), sock = zmq.socket('sub'); sock.subscribe(''); sock.bind('tcp://*:5555'); sock.on('message', function (msg) { var event = JSON.parse(msg); io.sockets.emit(event.type, event.data); }); Friday, March 2, 12
60. var io = require('socket.io').listen(8080), zmq = require('zmq'), sock = zmq.socket('sub'); sock.subscribe(''); sock.bind('tcp://*:5555'); sock.on('message', function (msg) { var event = JSON.parse(msg); io.sockets.emit(event.type, event.data); }); Friday, March 2, 12
61. var io = require('socket.io').listen(8080), zmq = require('zmq'), sock = zmq.socket('sub'); sock.subscribe(''); sock.bind('tcp://*:5555'); sock.on('message', function (msg) { var event = JSON.parse(msg); io.sockets.emit(event.type, event.data); }); Friday, March 2, 12
62. <script src="http://localhost:8080/socket.io/socket.io.js"> </script> <script> var socket = io.connect('http://localhost:8080'); socket.on('debug', function (data) { console.log(data); }); </script> Friday, March 2, 12
63. LE CODE •blog comments •chat •canvas Friday, March 2, 12
64. LE CODE •blog comments •chat •canvas Friday, March 2, 12
65. class CommentController extends Controller { public function createAction(Post $post) { $comment = new Comment(); $comment->setPost($post); $request = $this->getRequest(); $form = $this->createForm(new CommentType(), $comment); $form->bindRequest($request); if ($form->isValid()) { $em = $this->getDoctrine()->getEntityManager(); $em->persist($comment); $em->flush(); $renderedRow = $this->renderView( 'AcmeBlogBundle:Comment:row.html.twig', array('comment' => $comment) ); return new Response($renderedRow, 201); } return new Response('{}', 400, array('Content-Type' => 'application/json')); } } Friday, March 2, 12
66. class CommentController extends Controller { public function createAction(Post $post) { $comment = new Comment(); $comment->setPost($post); $request = $this->getRequest(); $form = $this->createForm(new CommentType(), $comment); $form->bindRequest($request); if ($form->isValid()) { $em = $this->getDoctrine()->getEntityManager(); $em->persist($comment); $em->flush(); $renderedRow = $this->renderView( 'AcmeBlogBundle:Comment:row.html.twig', array('comment' => $comment) ); return new Response($renderedRow, 201); } return new Response('{}', 400, array('Content-Type' => 'application/json')); } } Friday, March 2, 12
67. Secret Sauce Friday, March 2, 12
68. private function publishCommentCreate(Comment $comment) { $context = new \ZMQContext(); $sock = $context->getSocket(\ZMQ::SOCKET_PUB); $sock->connect('tcp://127.0.0.1:5555'); $renderedRow = $this->renderView( 'AcmeBlogBundle:Comment:row.html.twig', array('comment' => $comment) ); $postId = $comment->getPost()->getId(); $msg = json_encode(array( 'type' => "post.$postId.comment.create", 'data' => $renderedRow, )); $sock->send($msg); } Friday, March 2, 12
69. private function publishCommentCreate(Comment $comment) { $context = new \ZMQContext(); $sock = $context->getSocket(\ZMQ::SOCKET_PUB); $sock->connect('tcp://127.0.0.1:5555'); $renderedRow = $this->renderView( 'AcmeBlogBundle:Comment:row.html.twig', array('comment' => $comment) ); $postId = $comment->getPost()->getId(); $msg = json_encode(array( 'type' => "post.$postId.comment.create", 'data' => $renderedRow, )); $sock->send($msg); } Friday, March 2, 12
70. private function publishCommentCreate(Comment $comment) { $context = new \ZMQContext(); $sock = $context->getSocket(\ZMQ::SOCKET_PUB); $sock->connect('tcp://127.0.0.1:5555'); $renderedRow = $this->renderView( 'AcmeBlogBundle:Comment:row.html.twig', array('comment' => $comment) ); $postId = $comment->getPost()->getId(); $msg = json_encode(array( 'type' => "post.$postId.comment.create", 'data' => $renderedRow, )); $sock->send($msg); } Friday, March 2, 12
71. $this->publishCommentCreate($comment); Friday, March 2, 12
72. var socket = io.connect('http://localhost:8080'); socket.on('post.'+postId+'.comment.create', function (data) { renderComment(data); }); Friday, March 2, 12
73. LE CODE •blog comments •chat •canvas Friday, March 2, 12
74. <div class="messages"></div> <form> <input type="text" name="message"> <button type="submit">Send</button> </form> <script src="http://localhost:8080/socket.io/socket.io.js"></script> <script src="jquery-1.7.min.js"></script> <script src="chat.js"></script> Friday, March 2, 12
75. var socket = io.connect('http://localhost:8080'), messages = $('.messages'); socket.on('message', function (message) { var messageHtml = $('<div></div>').text(message.body); messages.append(messageHtml); messages.prop('scrollTop', 100000); }); Friday, March 2, 12
76. var socket = io.connect('http://localhost:8080'), messages = $('.messages'); socket.on('message', function (message) { var messageHtml = $('<div></div>').text(message.body); messages.append(messageHtml); messages.prop('scrollTop', 100000); }); Friday, March 2, 12
77. var form = $('form'); form.submit(function (event) { event.preventDefault(); var input = form.find('*[name=message]'), body = input.val(); if (!body.length) { return; } socket.emit('message', { name: name, body: body }); input.val(''); }); Friday, March 2, 12
78. var form = $('form'); form.submit(function (event) { event.preventDefault(); var input = form.find('*[name=message]'), body = input.val(); if (!body.length) { return; } socket.emit('message', { name: name, body: body }); input.val(''); }); Friday, March 2, 12
79. var io = require('socket.io').listen(8080); io.sockets.on('connection', function (socket) { socket.on('message', function (message) { io.sockets.emit('message', message); }); }); Friday, March 2, 12
80. var io = require('socket.io').listen(8080), messages; messages = []; io.sockets.on('connection', function (socket) { messages.forEach(function (message) { socket.emit('message', message); }); socket.on('message', function (message) { io.sockets.emit('message', message); messages.push(message); }); }); Friday, March 2, 12
81. var io = require('socket.io').listen(8080), messages; messages = []; io.sockets.on('connection', function (socket) { messages.forEach(function (message) { socket.emit('message', message); }); socket.on('message', function (message) { io.sockets.emit('message', message); messages.push(message); }); }); Friday, March 2, 12
82. var io = require('socket.io').listen(8080), bufferLimit = 15, messages; messages = []; io.sockets.on('connection', function (socket) { messages.forEach(function (message) { socket.emit('message', message); }); socket.on('message', function (message) { io.sockets.emit('message', message); messages.push(message); if (messages.length > bufferLimit) { messages = messages.splice(-bufferLimit, bufferLimit); } }); }); Friday, March 2, 12
83. var io = require('socket.io').listen(8080), bufferLimit = 15, messages; messages = []; io.sockets.on('connection', function (socket) { messages.forEach(function (message) { socket.emit('message', message); }); socket.on('message', function (message) { io.sockets.emit('message', message); messages.push(message); if (messages.length > bufferLimit) { messages = messages.splice(-bufferLimit, bufferLimit); } }); }); Friday, March 2, 12
84. LE CODE •blog comments •chat •canvas Friday, March 2, 12
85. USE CASES •Games •Notifications •Collaboration •Statistics •Chat Friday, March 2, 12
86. PUB/SUB Friday, March 2, 12
87. Push only? Friday, March 2, 12
88. EventSource. Friday, March 2, 12
89. LINKS • tools.ietf.org/html/rfc6455 • dev.w3.org/html5/websockets • developer.mozilla.org/en/WebSockets • socket.io • github.com/igorw/websockets-talk Friday, March 2, 12
90. github.com/igorw/websockets-talk Friday, March 2, 12
91. CREDITS • thenounproject.com • stopwatch • lightning • sync • refresh Friday, March 2, 12
92. Questions? @igorwesome speakerdeck.com /u/igorw joind.in/5997 Frögli? Friday, March 2, 12