Gtug girls meetup web socket handson

3,125 views

Published on

0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,125
On SlideShare
0
From Embeds
0
Number of Embeds
1,451
Actions
Shares
0
Downloads
13
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Gtug girls meetup web socket handson

  1. 1. WebSocketリアルタイム Web を切り開く新しいプロトコル
  2. 2. Jxck● id: Jxck● github: Jxck● twitter: jxck_● blog: http://d.hatena.ne.jp/jxck● Love: music
  3. 3. なにそれおいしいの?WebSocket?
  4. 4. "みんなで文書を共有しよう"これまでの Web
  5. 5. サーバに上げた文書(HTML)を示す場所(URL)を教えればソフト(Browser)を使ってそれを取得(HTTP)できるし良い感じ。"みんなで文書を共有しよう"
  6. 6. HTTP でドキュメントを取得文書
  7. 7. HTTP でチャットF5 を連打!!?
  8. 8. Pull ベースの Web
  9. 9. Web2.0的なアレでは
  10. 10. もう少し賢く(Long Polling)
  11. 11. 文書? Pull?実際に送りたいデータ。小さい、しかも双方向で送りたい。{"message" : "hello world","author" : "Jxck"}
  12. 12. もっと効率よくできないか?● Push するために Pull しまくってる○ HTTPがもともとそういうものだからしょうがない● やり取りするメッセージも小さいのに○ HTTPはもと(ry● もっとカジュアルに送受信したい○ (ry
  13. 13. よろしい、ならば HTML5 だよんだ?
  14. 14. Push (というか双方向)
  15. 15. WebSocket● 小さいデータを● 沢山の人と● 頻繁に● 効率よく● 双方向でやりとりするチャットやゲームに最適
  16. 16. WebSocket を使ってプログラミングをしてもいいんだけど、、Q: 先生 WebSocket が繋がりません!● 非対応ブラウザ● ネットワーク環境● ウイルス対策ソフト● 大人の事情A: Socket.IO というのがあってだな。
  17. 17. Socket.IO のポジションブラウザの API を生でゴリゴリライブラリでサクサクDOM jQueryWebSocket Socket.IOココ
  18. 18. Socket.IO どうよ?つながりにくい環境でもいい感じに通信してくれる。あるといいな、があるんですよね。認証とか。古いブラウザでも動きました!!色んな言語で使えるのがいい。みんな使ってたから作者がイケメン*意見には個人差があります
  19. 19. Handson
  20. 20. Socket.IO を使ってみよう2, サーバ側の実装1, サーバに接続するブラウザ側の実装http://54.250.126.97:3000/ これを作ります。
  21. 21. 環境Node.js のインストール● 本家インストーラ● nodebrewハンズオンマテリアルhttps://github.com/Jxck/socket.io.chat-sample$ node -vv0.10.4$ npm -v1.2.18 (多少違ってもok)
  22. 22. Socket.IO.Chat-Sample$ cd socket.io.chat-sample$ cd handson$ npm install準備完了(おかしかったらチューターまで)
  23. 23. 1. ブラウザ側の実装AWS で実装済みのサーバサーバに接続するブラウザ側の実装1. サーバと接続2. メッセージ送信3. メッセージ受信
  24. 24. 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 に追加});});
  25. 25. 起動方法$ cd socket.io.chat-sample$ cd handson$ node server.js実装したらサーバを起動(おかしかったらチューターまで)http://localhost:3000/ にアクセス
  26. 26. 2. サーバ側の実装node.js でサーバを実装1. 接続の確認2. メッセージ受信3. メッセージ送信サーバに接続するブラウザ側の実装
  27. 27. 2. サーバ側の実装// Socket.IOvar 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);});});
  28. 28. 起動方法$ cd socket.io.chat-sample$ cd handson$ node server.js実装したらサーバを起動(おかしかったらチューターまで)http://localhost:3000/ にアクセス
  29. 29. まとめこのページを読んでいるということは、今頃君はもうやり遂げたということだろう。おめでとう。今回は Socket.IO を使ったチャットを作ってもらたわけだが、どうだっただろうか? なんか思ったよりも簡単で楽しいと思っていただけたなら本望だ。もし余力があれば、今回のチャットを色々改造したり、 Socket.IO を使わない WebSocket のプログラミングにするなど、自分なりのリアルタイム Web に挑戦してみて欲しい。これからの Web を担う君たちには云々かんぬん。健闘を祈る。Jxck

×