Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebSocketことはじめ

17,621 views

Published on

2011.7.30に大阪で行われた、第一回「HTML5など勉強会」での発表資料です。

Published in: Technology
  • Login to see the comments

WebSocketことはじめ

  1. 1. ⾃自⼰己! ! !  ⼤大! ! !
  2. 2. ! ! ⼀一 ⽇日! 
  3. 3. ⽇日 ⽬目⽇日 ⼈人⽇日
  4. 4. ! ! 
  5. 5. !  ⽣生 ⽅方 ⽤用!  ⾼高 ⽐比 !  !  ! 
  6. 6. ⽅方!  ⽅方 ! 
  7. 7. ⽅方!  ⽅方!  !  ⽅方
  8. 8. ⽅方!  ⽅方 ! ! 
  9. 9. ! !  !  !  ! 
  10. 10. ! ! !  ! 
  11. 11. ! !  !  ⽣生 ⽣生 !  ⽤用!  !  ⼤大
  12. 12. ! !  !  ⼀一 ! 
  13. 13. !
  14. 14. !
  15. 15. ! !  !  ⽂文 ! !  !   ⽣生 !  ⾏行行
  16. 16. !  ⼀一!  !  ! !  !  ⽤用 ! 
  17. 17. ! ! !  !!  ! !  !!  !! 
  18. 18. !  ⾒見見 ! !  ! 
  19. 19. !  !  ⽂文 ⼊入⼒力力 !  ! 
  20. 20. !  !  !!  ! ! 
  21. 21. !  ! !!  !
  22. 22. !  !  ⽤用 ! !  ! ⽤用 ! !  !  ⽤用 ! ⽤用 ⼈人
  23. 23. !  ! ! ! 
  24. 24. !  ! !
  25. 25. !  ⽣生// !var ws = require(“websocket-server”); !!var server = ws.createServer();!server.listen(80); // 80 !! server.addListener("connection", function(connection){ ! !connection.addListener("message", function(msg){ ! ! !// ! !! ! !server.broadcast(msg);! !}); !});!
  26. 26. ! ⽣生 var ws = new WebSocket(“ws://example.com/chat/”);!!  ws.onopen = function() {};! ws.onclose = function() {};! ws.onmessage = function() {};! ws.onerror = function() {};!!  ws.send(message);! ws.close();!
  27. 27. !  !  ! !  ! 
  28. 28. ! !  ⽅方 !  ⽅方 ⾃自 !  ! 
  29. 29. !  ⽣生var io = require(‘socket.io’).listen(80)!!!! io.sockets.on(connection, function (socket) {
 !socket.on(‘message’, function(message) {! ! !// ! ! !io.sockets.send(message);! !});
});!!
  30. 30. !  <script src="/socket.io/socket.io.js"></script>! !! ⽣生 var socket = io.connect(‘ws://example.com’);!!  socket.on(’message, function (data) {! !// ...
 !socket.send(message);! });
 !
  31. 31. !  ! !  ! ! 
  32. 32. !  ! !  ⽇日 ! ⽤用 ⾃自 ! 
  33. 33. ⾮非
  34. 34. !  ⽣生var Pusher = require(pusher);!var pusher = new Pusher({! !appId: ‘YOUR_APP_ID’, // Pusher ! !appKey: YOUR_APP_KEY,! !secret: YOUR_APP_SECRET!});!var channel = pusher.channel(‘chat’); // !!! channel.trigger(message, data);!! ⽤用
  35. 35. ! <script src=“http://js.pusherapp.com/1.8/pusher.min.js"></script>!!!  ⽣生var pusher = new Pusher(YOUR_APP_KEY);!var channel = pusher.subscribe(chat);!! channel.bind(message, function(data) {! !//!});!
  36. 36. !  ⼒力力!  !  ⼀一
  37. 37. ! !  ⽅方! !  ʼ’

×