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