Node.js でサクッと WebSocket
•
0 likes•317 views
WebSocketの簡単な説明と、Node.jsでサクッと実装するためのコードです。 2019/9/27開催、『Webナイト宮崎 Vol.6 〜てげJavaScript学びたい〜』での発表資料です。 デモ環境：http://shobon.herokuapp.com/ コード：https://github.com/tomoeine/websocket-shobon-game
Recommended
More Related Content
More from Tomoe Sawai
More from Tomoe Sawai (10)
Recently uploaded
Recently uploaded (10)
Node.js でサクッと WebSocket
- 2. 自己紹介 フリーランスWebエンジニア 澤井友恵 @tomoeine ● 宮崎の山の中でリモートワーク ● 東京生まれ東京育ち ● 趣味は岩登り（ボルダリング） ● 岩がきっかけで宮崎へ夫婦で移住 ● Laravel, Vue.js, Rails, AWS 等 自己紹介
- 5. 自己紹介HTTP でインタラクティブ性を実現したい ● HTTPは 1. リクエスト 2. レスポンス で処理が完結する プロトコル自体が双方向ではない リクエスト レスポンス
- 6. 自己紹介HTTPでインタラクティブ術『ポーリング』 ● HTTPリクエストを一定間隔で送ることで、 リアルタイムなデータを取得する方法 ● JavaScript では setInterval を使ったり $(function(){ setInterval(function(){func();},1000); }); function func(){ $.getJSON('/path/to/ajax', function(json){ console.log(json); }); } リクエスト レスポンス リクエスト レスポンス ・ ・ ・
- 8. Stripe PHP vs Laravel Cashierそれでも・・・ HTTPリクエストのヘッダが大きく通信負荷がかかる ロングポーリングはサーバーへの負荷が大きい 双方向通信はできない
- 9. 自己紹介 そこで WebSocket ● 双方向通信用のプロトコル ● 接続を確立後はクライアント・サーバーで 双方向に通信できる ● ヘッダは最大でも14Byte！ ● サーバーへの負荷が少ない
- 11. 自己紹介 プロジェクトの初期化 // プロジェクトを作る $ mkdir websocket $ cd websocket $ yarn init -y // WebSocket のライブラリをインストール $ yarn add ws
- 12. 自己紹介WebSocket サーバー側のコード const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection',function(ws){ // クライアントからメッセージを受け取った ws.on('message',function(message){ console.log("Received: " + message); // クライアントにメッセージを送る wss.clients.forEach(function(client){ client.send(message + ' : ' + new Date()); }); }); });
- 13. 自己紹介 クライアント側のコード <input type="text" id="message" /> <input type="button" id="send-button" value="Send" /> <h5>Received Message</h5> <p id="received-message"></p> <script> const sock = new WebSocket('ws://127.0.0.1:8080'); sock.addEventListener('message',function(e){ document.getElementById('received-message').innerHTML = e.data }); document.addEventListener('DOMContentLoaded',function(e){ document.getElementById('send-button').addEventListener('click',function(e){ sock.send(document.getElementById('message').value); }); }); </script>
- 14. デモ
- 17. 自己紹介 (´・ω・｀)のゲーム ● 詳細は GitHub で！ https://github.com/tomoeine/websocket-shobon-game // シングルプロセスなので変数に入れておくだけでOK（ただし同時に来るとちゃんと計算できないかも） let x = 0 let y = 0 wss.on('connection',function(ws){ ws.on('message',function(message){ // 文字列を見て座標の計算してるだけ if (message === '右' && x < 220) { x = x + 10 } else if (message === '左' && x > 0) { x = x - 10 } // 略 // 計算した座標を全てのクライアントに送る sendMessage() }); });