Month: February 2020

### 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でデータ通信が出来るわけか。