2013年6月8日土曜日

「WebSocketでチャットを作ろうハンズオン」 #gtuggirls

GTUG Girlsの第11回は WebSocket でチャットを作りました!

今回は Node.js の Socket.IO というライブラリを使っています。前回は WebGL をゴリゴリ書かなくても動かせる Three.js を使い、今回は WebSocket をゴリゴリ書かなくても動かせる Socket.IO を使う。たくさんの先人エンジニアの皆さんのおかげで、作りたいものにフォーカスできるというのはすばらしいことですね :D

まず最初は GTUG Girls 恒例のなごみタイムから。ハンズオンを始める前に、軽食やお菓子を持ち寄って、交流会を行います。これをきっかけにお互い仲良くなり、ハンズオンの最中にわからないことがあったら隣近所で助け合うというのが GTUG Girls の特徴の一つです。

講師は Jxck さん、そしてチューターとして hokaccha さん、 tacamy さん 、komasshuさん、a2cさんにご参加頂きました。ありがとうございました!!!少人数で開催し、チューターさんは多めにいらして頂き、わからないことがあったら聞くことができ、そして全員が自分の手で動く物を作って帰る!というのもGTUG Girlsの特徴です。

イベントページ: https://plus.google.com/u/0/events/c1bitj7ip9bfhblj8ldkau8ilas

スライドはこちら

 

GTUG Girls では手を動かして動く物を作るのがポリシーですので、今回もハンズオンです。

ハンズオンの資料はこちら: https://github.com/Jxck/socket.io.chat-sample

まずはサーバに接続するクライアント側の実装を行い、既に講師の Jxck さんが立ててあったサーバでテスト。次に、Node.js でサーバを立て、サーバ側の実装を行いました。

●クライアント側の実装作業

1) サーバに接続する
2) メッセージを送信する
3) その送信されてきたメッセージを受信する


チャットできてる!



●サーバ側の実装作業 (node.js でサーバを実装)

1) 接続の確認
2) メッセージを受信
3) メッセージを送信


実装したら、サーバを起動し、確認。チャットの完成です!
みんながつぶやく言葉やAAが画面に流れ始めました。
ちなみに Console.log で確認しながら進めていたのですが
なぜかそのまま「Console.logで動くチャット」を楽しむ人ができてしまったり(笑)

今回も色々楽しかったです!講師&チューター&スタッフの皆さん、ありがとうございました!
というわけでツイートまとめ♪



Disclaimer

このブログは山崎富美の個人的なものです。ここで述べられていることは私の個人的な意見に基づくものであり、私の雇用者には一切の関係はありません。