node.js

第 10回

まずはこちらにアクセスしてみて下さい。

http://gamepatissier.com

node.js とは何か？

サーバサイド JavaScript と呼ばれるもので、JavaScript だけでサーバを立ててつつ通信するためのプログラムが書いてあるプログラム！

今日は実際にローカル（自分の PC 内） にサーバを立てて、それと通信してみます。作るのは、今まさに皆さんがアクセスしたサイトと同じものです！

まずは先にとにかく手を動かしてものを創ってみましょう！

さて、解説に入ります。

node をインストールしてみて最初に行った

express -tejs SocialScketch

とは何だったのでしょうか？ これは SocialScketch というサーバとそこにアクセスした際に みれる html ファイルをセットにしたものを作るものです。

上のスライドのコマンドを実行することで

1. node_modules2. public3. routes4. views

というディレクトリが作られ、 app.js というファイルがおまけで付きます。

app.js とは何なのか？

これはサーバのプログラムそのものになります。 ブラウザで実行されている JavaScript が何か質問をして来たら

それに対して返事をするプログラム、といって問題ないです。

app.js というファイル名の通り、 JavaScript で書かれています。普通サーバ用のプログラムというのはPHP や Perl といったプログラムで書かれることがあるのですが

文法等が JavaScript と違うため、今までサーバ専門のプログラマが必要でした。

これが node.js のおかげで多くのプログラマがサーバも作れるようになりました。

public, view はブラウザ側で使われるもので、javascripts は JavaScript 置き場、images は画像やサウンドデータ置き場stylesheets は css 等の置き場になります。

views 以下にある .ejs というファイルは 拡張子は違いますが、中身は .html です。

npm link express socket.ioというコマンドは何をしていたのか？

これは今回のプロジェクトで使うライブラリをインストールしていました。express はテンプレートを自動で作り出してくれるもの。socket.io は通信プログラム本体になります。

node app.jsは何をしていたのか？

これは web サーバを立てるためのコマンドになります。これを実行するだけでサーバが起動します。

途中から追加していたプログラムの解説をします。大きく分けて３つの塊を作りました。

まず初めに追加したのは、 通信するサーバは何か？ を指定する部分でした。 (Draw.js)

var socket = io.connect(“http://localhost:3000”);の部分です。

次に追加したのはサーバにデータを送信する部分でした。socket.emit(“command name”, 何かデータ );という形で、サーバに送信しています。

どんなデータをどうして送ったのか？は少し後に解説します。

①

次に追加したのはサーバ部分になります。 (app.js)var io = require(‘socket.io’).listen(server);io.sockets.on(‘connection’, (関数 ) { // 接続出来たらやること});

という構造です。やることは、１人からメッセージが来たら、同じサーバにつないでいる人全員にメッセージが来たことを教えるだけです。

②

その次に追加したのは、そうやってサーバから送信されたデータをブラウザ側で処理する部分です。

具体的には Draw.js のsocket.on(“DrawMessage”, function(data) { // この中の部分！});

具体的には、頂点の情報をもらって、その通りに線を描くだけです。

③

部分の解説は終了しました。全体の解説に移りますよ！

自分

http://localhost:3000/(サーバ )

線を描いたよ！

①

誰か別な人 誰か別な人 誰か別な人

線を描いたってよ！

③

②

もらったデータに沿って線を描きます！！

もらったデータに沿って線を描きます！！

もらったデータに沿って線を描きます！！

もらったデータに沿って線を描きます！！送った本人にも

送信されます！

さて、実際に送っていたデータはどういったデータだったのでしょうか？

線を描く、初めの (x, y) と

線の終わりの (x, y)

それから線の色

context.beginPath()

moveTo(x, y)

lineTo(x, y)

lineTo(x, y)

lineTo(x, y)

closePath()

最後に stroke() で線が

実際に描かれる

というところでネットワーク終了です。ネットワーク上を流れるデータのことをソケットと言いますが、今回ソケットを直接は扱いませんでした。もし生データを扱いたい場合はsocket.emit() を socket.send() にするだけでWeb Socket と変わらない機能を直接使うことが出来ます。

あまり JavaScript では直接的なデータは扱わないことになっています。（スペシャリストでなくても扱えるように）

ネットワークは決まり事がすごく多く、それらをすべて網羅して記憶するくらいの勢いで勉強しないといけないジャンルです。

今回は一部だけでしたが JavaScript の機能を拡張してくれる人達のおかげでだいぶ楽に扱えたのではないかなーと思います。

今回作ってもらったのはローカルサーバを使ったものなのでWeb からはアクセス出来ませんがサーバさえ立てればすぐに使えるものなので何か作りたいものがあったバイは活用していただけたらと思います。

というところで今日は終了になります。お疲れ様でした。

おわり