Category: Socket.IO

DevToolでコンソールを開きながら、getting startedで挙動を確認します。

### index.html

<h1>Pusher Test</h1>
    <p>
        Try publishing an event to channel <code>my-channel</code>
        with event name <code>my-event</code>.
    </p>
     <script src="https://js.pusher.com/5.0/pusher.min.js"></script>
    <script>
        Pusher.logToConsole = true;

        var pusher = new Pusher('****************',{
            cluster: 'ap3',
            forceTLS: true
        });

        var channel = pusher.subscribe('my-channel');
        channel.bind('my-event', function(data){
            alert(JSON.stringify(data));
        });
    </script>

### server side
$ curl -sS https://getcomposer.org/installer | php
$ php composer.phar require pusher/pusher-php-server

require __DIR__ . '/vendor/autoload.php';

$options = array(
	'cluster' => 'ap3',
	'useTLS' => true
);
$pusher = new Pusher\Pusher(
	'********************',
	'********************',
	'******',
	$options
);

$data['message'] = 'hello world';
$pusher->trigger('my-channel', 'my-event', $data);

server側からclient側でデータが渡っていることを確認できます。

### html
– roomの値とmsgをjsonでemitする

<form id="myForm">
		<select id="rooms">
			<option value="room-1">Room 1</option>
			<option value="room-2">Room 2</option>
		</select>
		<input type="text" id="msg">
		<input type="submit" value="send">
	</form>
	<ul id="logs">
	</ul>
	<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
	<script src="/socket.io/socket.io.js/"></script>
	<script>
		$(function(){
			var socket = io.connect();
			// emit: イベント発信　(ブラウザ側)
			// on: イベント待ち受け　(サーバ側)
			$('#myForm').submit(function(e){
				// preventDefaultでsubmit後に遷移しないようにする
				e.preventDefault();
				socket.json.emit('emit_from_client', {
					room: $('#rooms').val(),
					msg: $('#msg').val(),
				});
				$('#msg').val('').focus();
			});
			socket.on('emit_from_server', function(data){
				$('#logs').append($('<li>').text(data));
			});
		});
	</script>

### app.js
joinしたルームに対してsocket.broadcastする

io.sockets.on('connection', function(socket){
	socket.on('emit_from_client', function(data){
		// ルームの情報を割り当て
		socket.join(data.room);	
		socket.emit('emit_from_server', 'you are in ' + data.room);
		// 対象ルームに対してのみbroadcast
		socket.broadcast.to(data.room).emit('emit_from_server', data.msg);
	});
});

on, emit, join, broadcastの意味がわかると、楽しくなってきます。

公式: https://socket.io/
– socket.ioはNode.jsで動いている

$ npm install socket.io

### node.jsサーバー起動
node app

var app = require('http').createServer(handler),
	io = require('socket.io').listen(app),
	fs = require('fs');
app.listen(1337);

function handler(req, res){
	fs.readFile(__dirname + '/index.html', function(err, data){
		if(err) {
			res.writeHead(500);
			return res.end('Error');
		}
		res.writeHead(200);
		res.write(data);
		res.end();
	})
}

### socket.io
emitで送って、onで待ち受ける

index.html

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
	<script src="/socket.io/socket.io.js/"></script>
	<script>
		$(function(){
			var socket = io.connect();
			// emit: イベント発信　(ブラウザ側)
			// on: イベント待ち受け　(サーバ側)
			$('#myForm').submit(function(){
				socket.emit('emit_from_client', $('#msg').val());
			});
		});
	</script>

app.js

io.sockets.on('connection', function(socket){
	socket.on('emit_from_client', function(data){
		console.log(data);
	});
});

### serverからclientにemit
app.js

io.sockets.on('connection', function(socket){
	socket.on('emit_from_client', function(data){
		// console.log(data);
		socket.emit('emit_from_server', 'hello from server: ' + data);
	});
});

html

<ul id="logs"></ul>
<script>
		$(function(){
			var socket = io.connect();
			// emit: イベント発信　(ブラウザ側)
			// on: イベント待ち受け　(サーバ側)
			$('#myForm').submit(function(e){
				// preventDefaultでsubmit後に遷移しないようにする
				e.preventDefault();
				socket.emit('emit_from_client', $('#msg').val());
			});
			socket.on('emit_from_server', function(data){
				$('#logs').append($('<li>').text(data));
			});
		});
	</script>

### socket.broadcast.emit
– socket.emitは接続しているsocketのみ
– socket.broadcast.emitは接続しているsocket以外
– io.sockets.emitは自分も含めたsockets

io.sockets.on('connection', function(socket){
	socket.on('emit_from_client', function(data){
		// console.log(data);
		// socket.emitは接続しているsocketのみ
		// socket.emit('emit_from_server', 'hello from server: ' + data);
		// socket.broadcast.emitは接続しているsocket以外
		socket.broadcast.emit('emit_from_server', 'hello from server: ' + data);
	});
});

dbに保存しない場合は、単にsocket.broadcast.emit、socket.onでデータ通信が出来るわけか。