第4回鹿児島node.jsの会資料＿内村
•
2 j'aime•1,498 vues
第4回鹿児島Node.jsの会資料です。前回の反省を踏まえてなるべく簡略化するようにしています。
Recommandé
Contenu connexe
Tendances
Tendances (14)
Similaire à 第4回鹿児島node.jsの会資料＿内村
Similaire à 第4回鹿児島node.jsの会資料＿内村 (20)
Plus de Koichi Uchimura
Dernier
Dernier (7)
第4回鹿児島node.jsの会資料＿内村
- 6. WebSocketとAjaxの違い ①Ajax技術は基本的にクライアントからサーバにリクエストを 送ることで通信する。WebSocket APIではサーバからもクライ アントからも通信を実施でき、完全な双方向通信が可能。 ②Ajax技術は同一のドメイン内での通信に限定されるものの、 WebSocket APIはクロスドメインでの通信に対応している。 ③Ajax技術はHTTP通信をベースにしているためセッションレス 通信やヘッダの転送など通信効率が悪い。WetSocketは直 接wsプロトコルやwssプロトコルを使って通信を実施し、Ajax 技術と比較して通信効率がいい。 ④WebSocket APIは双方向通信を前提として設計されており、 APIがシンプルで扱いやすい。 引用「マイナビニュース」
- 7. socket.ioって何ぞや？？ socket.io = WebSocket と思いがちですが、 実はそうではありません・・・。 Socket.io ajax(xhr-polling) jsonp-polling WebSocket な感じで新旧様々なブラウザからのリアルタイム 通信を実現するライブラリ（ラッパー）だそうです。
- 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 ほとんどのブラウザで 対応してるってことですね！
- 15. まずはapp.jsから 定型文から見ていきましょう。 server = http.createServer(app); // サーバーを立ち上げます。 server.listen(3000); // 3000番ポートを待機状態にします。 var socket = require('socket.io'); var io = socket.listen(server); // socketも待機状態にします。
- 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. 次にクライアント側 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. クライアント側の受信部 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 }); に対応しています。