BLOGスタッフブログ

インソースマーケティングデザイン

2015.02.24 システム

node.jsのsocket.io (WebSocket)が楽しい!

お久しぶりです、Webクリエイターの飯岡です。

最近思い立ってnode.jsを使ったリアルタイムweb開発を勉強したりしています。
実際に個人でサイトを立ち上げて検証したりもしているなかで
websocketについてこれはすごいと思ったところを書いていきます。
websocketってなんぞ!?っていう方は調べてみるといいかもしれません。

接続方法は特にめんどくさくないです。
<<サーバー側>>
var io = require(“socket.io”).listen(8895);
io.sockets.on(“connection”, function (socket) {
 この中に処理を書きます。
});

<<クライアント側>>
var socket = io.connect(‘http://hogehoge.hoge:8895’);
socket.on(‘connect’, function() {
 この中に処理を書きます。
});

ここからは、実装例を書いていきます。

 以下ソースコード例(接続周りは省略)
 <<サーバー側>>
 socket.emit(‘sousin’,’これが送りたい文字だ!’);

 <<クライアント側>>
 socket.on(‘sousin’, function(data) {
  alert(data);
 });

 _人人人人人人人人人人_
 > これだけだと!? <
  ̄Y^Y^Y^Y^Y^Y^Y^ ̄

そうなんです、このコードを配置するとサーバー側でemitされた瞬間に
クライアント側に”これが送りたい文字だ!”と表示されます。
といってもこの状態では1:1の通信しかできません。
なので、サーバーから全クライアントに向けて(接続者以外)に
ブロードキャストでメッセージを送りたいときは

 <<サーバー側>>
 socket.broadcast.emit(‘sousin’,’これが送りたい文字だ!’);
 socket.emit(‘sousin’,’これが送りたい文字だ!’); // 本人にも送り返す場合はこれも書く

 <<クライアント側>>
 socket.on(‘sousin’, function(data) {
  alert(data);
 });

もちろんクライアント側に変更はいりません。

ちなみに複数クライアントが接続済みの状態で
特定の相手にだけメッセージを送りつけたい場合は
予めソケットIDを取得しておき。

 <<サーバー側>>
 var socketID = 送りたい相手のソケットID
 socket.to(socketID).emit(‘sousin’,’これが送りたい文字だ!’);

 <<クライアント側>>
 socket.on(‘sousin’, function(data) {
  alert(data);
 });

というようになります。

さらにさらに、チャットシステムなんていうのは
チャットルームがあって、そのチャットルームの中の会話は
チャットルーム内にしか見えないという実装が当然ですが
なんと!?
node.jsのsocket.ioにはその機能が最初からついてます。

まず、クライアント接続時に特定の条件で
そのクライアントを何処かの部屋に所属させます。

<<サーバー側>>
・まず接続者を参加させる
 socket.join(部屋IDっぽいなにか);
・ルームに所属している人にメッセージ送信
 ※ブロードキャストとちがって本人にも応答が戻ります。
 io.sockets.to(部屋IDっぽいなにか).json.emit(‘sousin’,’これが送りたい文字だ!’);

<<クライアント側>>
・受ける方としては変わりません。
 socket.on(‘sousin’, function(data) {
  alert(data);
 });

どうですか?簡単ですね。

今回は、node.jsを知っている人向けの情報でしたが
もしnode.jsをこれから学んでみたい方がいましたら
まずはsocketより先にnode.jsの基本を学んでみるといいかもしれません。

インソースマーケティングデザインが書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します