Node.js 淺談socket.io

2,346
-1

Published on

SocketIO歷史、發展、基礎介紹,並展示Node.js SocketIO範例

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,346
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Node.js 淺談socket.io

  1. 1. 淺談Socket.IO MiCloud - Simon
  2. 2. 大綱 ● SocketIO的歷史與發展 ● Node.js的SocketIO套件介紹 ○ Server Socket ○ Client Socket ● 第一個SocketIO實作 ● SocketIO範例演示 - SocketIO Talk
  3. 3. Communicate between Server to Client
  4. 4. <hr/> <div id="tt">----</div> <hr/> setInterval(function(){ $('#tt').html( new Date() ); }, 1000); 古早的作法 - Polling (輪循) Client Server DATA HEADER
  5. 5. 古早的作法 - Comet
  6. 6. HTML5 - WebSocket ● WebSocket是HTML5開始提供的一種瀏覽器 與伺服器間進行全雙工通訊的網路技術 ● WebSocket通訊協定於2011年被IETF定為標 準 RFC 6455,WebSocketAPI被W3C定為標 準。
  7. 7. Browser支援(wikipedia) ● Google Chrome: Chrome 4 及之後的版本都支援websocket,版本14開始 支援Version 13協定。 ● Safari: iOS4 以及 5 上的safari使用的舊版的WebSocket;iOS 6 開始支援Version 13 ● Mozilla Firefox: 版本4之後支援websocket,版本6開始支援Version 13。 ● Opera: Opera 10.7和11.0的預覽版本中也支援了websocket。 ● Internet Explorer: 從版本10開始支援WebSocket。
  8. 8. First SocketIO App Server Client 單獨啟動SocketIO Server的方式 透過emit發送訊息至client端 監聽”my other event”事件,進行處置 載入SocketIO套件Library 建立SocketIO連線 聽取事件,進行反應動作
  9. 9. Enhance First App ● 修改為Server持續push資料至Client ● Push的資料內容加上時間參數
  10. 10. 其他SocketIO啟動方式 - HTTP Server var app = require('http').createServer(handler) , io = require('socket.io').listen(app) app.listen(8088); function handler (req, res) { res.writeHead(200); res.end(....); } io.sockets.on('connection', function (socket) { ...
  11. 11. 其他SocketIO啟動方式 - Express var app = require('express')() , server = require('http').createServer(app) , io = require('socket.io').listen(server); server.listen(80); app.get('/', function (req, res) { res.sendfile(__dirname + '/index.html'); }); io.sockets.on('connection', function (socket) { …..
  12. 12. 其他範例 http://socket.io/#how-to-use
  13. 13. 進階的SocketIO範例 - SocketIO Talk function handler (req, res) { //implement of reading chat.html } io.sockets.on('connection', function (socket) { socket.on('addme',function(username) { //implement of emit event user add }); socket.on('sendchat', function(data) { //implement of emit event of chat }); socket.on('disconnect', function() { //implement of emit evnet of disconnect }); });
  14. 14. 進階的SocketIO範例 - SocketIO Talk <script> var socket = io.connect('/'); socket.on('connect', function() { //implement of connect event }); socket.on('chat',function(username, data) { //implement of chat event receive }); $(document).ready(function(){ $('#sendtext').click(function(){ //implement of submit chat }); }); </script>
  15. 15. MiCloud Team@Yahoo Hackday 2012 https://www.youtube.com/watch?v=EKuYfk5gnzE&feature=em-share_video_user
  16. 16. Today’s Code git@github.com:peihsinsu/class-nodejs-socketio.git
  17. 17. Q&A...
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×