Gtug girls meetup web socket handson
- 2. Jxck ● id: Jxck ● github: Jxck ● twitter: jxck_ ● blog: http://d.hatena.ne.jp/jxck ● Love: music
- 10. Web2.0的なアレでは
- 12. 文書？ Pull？ 実際に送りたいデータ。 小さい、しかも双方向で送りたい。 { "message" : "hello world", "author" : "Jxck" }
- 13. もっと効率よくできないか？ ● Push するために Pull しまくってる ○ HTTPがもともとそういうものだからしょうがない ● やり取りするメッセージも小さいのに ○ HTTPはもと(ry ● もっとカジュアルに送受信したい ○ (ry
- 15. Push (というか双方向)
- 16. WebSocket ● 小さいデータを ● 沢山の人と ● 頻繁に ● 効率よく ● 双方向でやりとりする チャットやゲームに最適
- 17. WebSocket を使ってプログラミング をしてもいいんだけど、、 Q: 先生 WebSocket が繋がりません！ ● 非対応ブラウザ ● ネットワーク環境 ● ウイルス対策ソフト ● 大人の事情 A: Socket.IO というのがあってだな。
- 18. Socket.IO のポジション ブラウザの API を 生でゴリゴリ ライブラリでサクサク DOM jQuery WebSocket Socket.IO コ コ
- 20. Handson
- 22. Socket.IO を使ってみよう 2, サーバ側 の実装 1, サーバに接 続するブラウザ 側の実装 http://54.250.126.97:3000/ これを作ります。
- 23. 環境 Node.js のインストール ● 本家インストーラ ● nodebrew ハンズオンマテリアル https://github.com/Jxck/socket.io.chat-sample $ node -v v0.10.4 $ npm -v 1.2.18 (多少違ってもok)
- 24. Socket.IO.Chat-Sample $ cd socket.io.chat-sample $ cd handson $ npm install 準備完了 (おかしかったらチューターまで)
- 25. 1. ブラウザ側の実装 AWS で実 装済みの サーバ サーバに接続す るブラウザ側の 実装 1. サーバと接続 2. メッセージ送信 3. メッセージ受信
- 26. 1. ブラウザ側の実装 // サーバに接続(AWS) var socket = io.connect('http://54.250.126.97:3000/'); $(function() { // 送信 $('#ok').on('click', function() { // クリックしたら var message = $('#message').val(); // 中身を取って socket.emit('message', message); // サーバに送信 }); // 受信 socket.on('message', function(data) { // 受信したら var $li = $('<li>', { text: data }); // li を作って $('#messages').append($li); // ul に追加 }); });
- 27. 起動方法 $ cd socket.io.chat-sample $ cd handson $ node server.js 実装したらサーバを起動 (おかしかったらチューターまで) http://localhost:3000/ にアクセス
- 28. 2. サーバ側の実装 node.js でサー バを実装 1. 接続の確認 2. メッセージ受信 3. メッセージ送信 サーバに 接続するブ ラウザ側の 実装
- 29. 2. サーバ側の実装 // Socket.IO var io = require('socket.io') , io = io.listen(server); // クライアントが接続してきたあと io.sockets.on('connection', function(socket) { // メッセージを受信したら socket.on('message', function(data) { // 全てのクライアントに送り返す io.sockets.emit('message', data); console.log(data); }); });
- 30. 起動方法 $ cd socket.io.chat-sample $ cd handson $ node server.js 実装したらサーバを起動 (おかしかったらチューターまで) http://localhost:3000/ にアクセス
- 31. まとめ このページを読んでいるということは、今頃君はもうやり遂げたと いうことだろう。おめでとう。 今回は Socket.IO を使ったチャットを作ってもらたわけだが、ど うだっただろうか? なんか思ったよりも簡単で楽しいと思っていた だけたなら本望だ。 もし余力があれば、今回のチャットを色々改造したり、 Socket. IO を使わない WebSocket のプログラミングにするなど、自分な りのリアルタイム Web に挑戦してみて欲しい。 これからの Web を担う君たちには云々かんぬん。 健闘を祈る。 Jxck