10回目苍辞诲别箩蝉
- 3. node.js とは何か？ サーバサイド JavaScript と呼ばれるもので、 JavaScript だけでサーバを立ててつつ 通信するためのプログラムが書いてあるプログラム！
- 4. 今日は実際にローカル（自分の PC 内） にサーバを立てて、 それと通信してみます。 作るのは、今まさに皆さんがアクセスしたサイトと同じものです！
- 6. さて、解説に入ります。
- 7. node をインストールしてみて最初に行った express -tejs SocialScketch とは何だったのでしょうか？ これは SocialScketch というサーバとそこにアクセスした際に みれる html ファイルをセットにしたものを作るものです。
- 8. 上のスライドのコマンドを実行することで 1. node_modules 2. public 3. routes 4. views というディレクトリが作られ、 app.js というファイルがおまけで付きます。
- 9. app.js とは何なのか？ これはサーバのプログラムそのものになります。 ブラウザで実行されている JavaScript が何か質問をして来たら それに対して返事をするプログラム、といって問題ないです。 app.js というファイル名の通り、 JavaScript で書かれています。 普通サーバ用のプログラムというのは PHP や Perl といったプログラムで書かれることがあるのですが 文法等が JavaScript と違うため、 今までサーバ専門のプログラマが必要でした。 これが node.js のおかげで多くのプログラマがサーバも作れるようになりました。
- 10. public, view はブラウザ側で使われるもので、 javascripts は JavaScript 置き場、 images は画像やサウンドデータ置き場 stylesheets は css 等の置き場になります。 views 以下にある .ejs というファイルは 拡張子は違いますが、中身は .html です。
- 11. npm link express socket.io というコマンドは何をしていたのか？ これは今回のプロジェクトで使うライブラリをインストールしていました。 express はテンプレートを自動で作り出してくれるもの。 socket.io は通信プログラム本体になります。
- 12. node app.js は何をしていたのか？ これは web サーバを立てるためのコマンドになります。 これを実行するだけでサーバが起動します。
- 14. まず初めに追加したのは、 通信するサーバは何か？ を指定する部分でした。 (Draw.js) var socket = io.connect(“http://localhost:3000”); の部分です。 次に追加したのはサーバにデータを送信する部分でした。 socket.emit(“command name”, 何かデータ ); という形で、サーバに送信しています。 どんなデータをどうして送ったのか？ は少し後に解説します。 ①
- 15. 次に追加したのはサーバ部分になります。 (app.js) var io = require(‘socket.io’).listen(server); io.sockets.on(‘connection’, ( 関数 ) { // 接続出来たらやること }); という構造です。 やることは、１人からメッセージが来たら、 同じサーバにつないでいる人全員に メッセージが来たことを教えるだけです。 ②
- 16. その次に追加したのは、 そうやってサーバから送信されたデータを ブラウザ側で処理する部分です。 具体的には Draw.js の socket.on(“DrawMessage”, function(data) { // この中の部分！ }); 具体的には、頂点の情報をもらって、その通りに線を描くだけです。 ③
- 18. 自分 http://localhost:3000/ ( サーバ ) 線を描いたよ！ ① 誰か別な人 誰か別な人 誰か別な人 線を描いたってよ！ ③ ② もらったデータに沿って 線を描きます！！ もらったデータに沿って 線を描きます！！ もらったデータに沿って 線を描きます！！ もらったデータに沿って 線を描きます！！ 送った本人にも 送信されます！
- 20. 線を描く、初めの (x, y) と 線の終わりの (x, y) それから線の色
- 21. context.beginPath() moveTo(x, y) lineTo(x, y) lineTo(x, y) lineTo(x, y) closePath() 最後に stroke() で線 が 実際に描かれる
- 22. というところでネットワーク終了です。 ネットワーク上を流れるデータのことをソケットと言いますが、 今回ソケットを直接は扱いませんでした。 もし生データを扱いたい場合は socket.emit() を socket.send() にするだけで Web Socket と変わらない機能を直接使うことが出来ます。 あまり JavaScript では直接的なデータは扱わないことになっています。 （スペシャリストでなくても扱えるように）
- 23. ネットワークは決まり事がすごく多く、 それらをすべて網羅して記憶するくらいの勢いで 勉強しないといけないジャンルです。 今回は一部だけでしたが JavaScript の機能を拡張してくれる人達のおかげで だいぶ楽に扱えたのではないかなーと思います。 今回作ってもらったのはローカルサーバを使ったものなので Web からはアクセス出来ませんが サーバさえ立てればすぐに使えるものなので 何か作りたいものがあったバイは活用していただけたらと思います。
- 25. おわり