第4回鹿児島node.jsの会資料_内村

968 views
900 views

Published on

第4回鹿児島Node.jsの会資料です。前回の反省を踏まえてなるべく簡略化するようにしています。

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

No Downloads
Views
Total views
968
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

第4回鹿児島node.jsの会資料_内村

  1. 1. 第4回勉強会 Socket.ioでリアルタイムチャットを作ろう 内村 康一
  2. 2. 今日の目次 第1章 expressの準備はいいですか~? 第2章 socket.ioの概略とインストール 第3章 チャットを作ってみよう
  3. 3. 第1章 第1章  expressの準備はいいですか~?
  4. 4. 第1章 expressの準備はいいですか~? 前回までのおさらい ① node.jsをインストール ② npmでexpressをインストール ③ npmでejsをインストール ここまではOKでしょうか?? まだの方は第1回の資料を参照して下さい。
  5. 5. 第2章 第2章 socket.ioの概略とインストール
  6. 6. WebSocketとAjaxの違い ①Ajax技術は基本的にクライアントからサーバにリクエストを 送ることで通信する。WebSocket APIではサーバからもクライ アントからも通信を実施でき、完全な双方向通信が可能。 ②Ajax技術は同一のドメイン内での通信に限定されるものの、 WebSocket APIはクロスドメインでの通信に対応している。 ③Ajax技術はHTTP通信をベースにしているためセッションレス 通信やヘッダの転送など通信効率が悪い。WetSocketは直 接wsプロトコルやwssプロトコルを使って通信を実施し、Ajax 技術と比較して通信効率がいい。 ④WebSocket APIは双方向通信を前提として設計されており、 APIがシンプルで扱いやすい。  引用「マイナビニュース」
  7. 7. socket.ioって何ぞや?? socket.io = WebSocket と思いがちですが、 実はそうではありません・・・。 Socket.io ajax(xhr-polling) jsonp-polling WebSocket な感じで新旧様々なブラウザからのリアルタイム 通信を実現するライブラリ(ラッパー)だそうです。
  8. 8. socket.ioの対応ブラウザ Internet Explorer 5.5+ Safari 3+ Google Chrome 4+ Firefox 3+ Opera 10.61+ iPhone Safari iPad Safari Android WebKit WebOs WebKit ほとんどのブラウザで 対応してるってことですね!
  9. 9. プッシュ型のWebsocket ① Ajaxの場合     ② WebSocketの場合 クライアント側 からアクション が必要 サーバ側から 直接アクション できる
  10. 10. クロスドメインが可能なWebSocket ① Ajaxの場合     ② WebSocketの場合 abc.co.jp ghi.com abc.co.jp 同一ドメイン内でしか使えない (クロスドメインのやり方はある みたいですが) def.jp ドメイン間でデータのやりとりが可能
  11. 11. Socket.ioのまとめ ①Socket.ioはWebsocketを含めたラッパーなの でWebSocketの機能もほぼ実現している。 ②基本的に様々なブラウザへの対応のため、 AjaxやComet、WebSocketなどの違いを吸収 するラッパーと考えて良さそう。 ③Expressは使わなくてもSocket.io単体で実装 できるらしい・・・。
  12. 12. Socket.ioのインストール いつもの通り npm install socket.io で終了です。
  13. 13. 第3章 第3章 チャットを作ってみよう
  14. 14. チャットの仕様 入力フォームに入力した文字が 新しい順に表示されます。 複数のブラウザで連動しますよ。
  15. 15. まずはapp.jsから 定型文から見ていきましょう。 server = http.createServer(app); // サーバーを立ち上げます。 server.listen(3000); // 3000番ポートを待機状態にします。 var socket = require('socket.io'); var io = socket.listen(server); // socketも待機状態にします。
  16. 16. app.jsの通信部分 次に通信部分です。 io.sockets.on('connection', function(socket) { // 繋がったよ~ "on"は「受信したとき」の意味 console.log("connection"); // メッセージを受けたときの処理 socket.on('msg', function(data) { クライアントが投げた「msg」データを console.log(data); 受信したとき // つながっているクライアント全員に送信 io.sockets.emit('msg', { value: data }); }); "emit"は「送信する」の意味。この場 // クライアントが切断したときの処理 合「自分も含めた全員に送信。 socket.on('disconnect', function(){ console.log("disconnect"); 自分以外の全員に送るには }); 「socket.broadcast.emit(...)」 });
  17. 17. 次にクライアント側 var socket = io.connect('http://localhost:3000'); // こっちもつながったよ~ socket.on('connect', function(msg) { ここには接続先のアドレスを記述。 console.log("connect"); }); // フォームを送信したときに $('form').submit(function() { //msgとして入力ボックス(ID:send)の値を送信 socket.emit('msg', $('#send').val()); こちらの"emit"も同様に送信の意味。 //入力ボックスの中身を空にする msgとしてテキストボックス内の値を $('#send').val(''); サーバに送信している。 return false; });
  18. 18. クライアント側の受信部 socket.on('msg', function(data) { // divの中に後付けする サーバからmsgが返ってきたら、<div> $('div').prepend(data.value + '<br>'); の中に値を挿入していく。 }); // 切断する $('#disconn').click(function(){ socket.disconnect(); ここのdata.valueは、app.jsで記述した io.sockets.emit('msg', { value: data }); に対応しています。
  19. 19. 実際に動かしてみると・・・ という感じで片方に入れたワードがもう片方にも反映されると思います。
  20. 20. socket.ioの使い道 ① リアルタイムチャットには最適 ② 細かいデータを頻繁にやり取りする ソーシャルゲームなんかにも使えそう。 ③ お絵描きもできるので、手書きで教える E-ラーニングなども簡単にできる。 ※ 画像や動画のやりとりには不向きかも・・・。
  21. 21. node-webkitのご紹介 nodeを使ってデスクトップアプリ(Widows/Mac/ Linux)が作れるという優れもの。 デスクトップアプリなので、デスクトップのAPI なんかもバンバン叩ける。 これでnodeを使ったBluetooth通信(SPP) ができました。 ※Visual Studio 2010やPython環境が必要。
  22. 22. ありがとうございました。 ご清聴ありがとうございました。

×