[javascript] socket.io

카테고리 없음 2020. 2. 10. 20:44

https://www.websequencediagrams.com/

WebSequenceDiagrams - Draw sequence diagrams online in seconds

Your file was not saved because you or someone else updated the file on the server. Please inspect the merged version and save again. Viewing: Automatically Merged Differences Your version Their version Revision history PREMIUM Current {{r.date / 1000 | my

www.websequencediagrams.com

sequence diagrams

title browser <-> node.js <-> redis

note over app_redis.js, redis server : endless loop setInterval nSec.
app_redis.js -> redis server : publish '111'
app.js -> redis server : subscribe '111'
app.html -> app.js : socket.io connect
app.html -> app.js : send sub '111'
app.js ->+ app.js : '111' on subscribe 
app.js ->+ app.html : send on sub rcv msg 
app.html -> app.html : display rcv msg

pre install sw

node.js

nodemon

redis

app_redis.js

// for redis 
const redis = require('redis');
const pub  = redis.createClient();


setInterval(()=> {
	var rightNow = new Date();
	var res = rightNow.toISOString().slice(0,10).replace(/-/g,"");
	var ds = (new Date()).toISOString();
	pub.publish('111', "{'test':'ABC 한글 !@#$% ▣ ⊙ ▒ ▷ ▶ ☎ ☞ ◑ ● ◇ ["+ ds +"]'}");	
	}
	, 1000
);

app.js

>nodemon app.js

// for redis 
const redis = require('redis');
// for websocket 
const io = require('socket.io')(3000);
const _ROOM = 'room';

io.on('connection', (socket) => {

	var subscriber = redis.createClient(6379, "127.0.0.1");

	socket.on('message', data => {
		socket.broadcast.emit('chat', 'socket id ' +socket.id + ' said : '  + data);
	});
	
	// data : {'room_id':111}
	socket.on(_ROOM, data => {
		subscriber.subscribe(data.value);
		subscriber.on("connect", function() {
			console.log('['+data.value + '] redis connected');
		});
		subscriber.on("subscribe", function() {
			console.log('['+data.value + '] redis subscribe, socket id : ' + socket.id);
		});
		subscriber.on("unsubscribe", function() {
			console.log('['+data.value + '] redis unsubscribe, socket id : ' + socket.id);
		});
		

		subscriber.on("message", (channel, message) => {
			var buf = Buffer.alloc(4000,1);
			if (data.value == channel)
				socket.emit(data.value, message.substring(7)); 
		});
		
	}); 
	
	socket.on('disconnect', function(){ 
		console.log('disconnected'); 
		console.log( socket.client.conn.server.clientsCount + " users connected" );
		
		// to do more here???
		subscriber.unsubscribe();
	});
	
});

app.html

<!DOCTYPE html>
<html>
<title>WebSocket Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>

<script>
	
	var gCnt = 1;
	var _RCNT = 10;

	function print(str) {
	    document.getElementById("output").innerHTML += (str + "\n")
	}

	var sockOpt = { 'forceNew': true, 'transports':['websocket'] };		//  'transports':['pooling;','websocket']
	var socket = io('http://localhost:3000', sockOpt);
	socket.on('connect', function() {
		print('connect');
		print(socket.id);
	});
	socket.on('message', function (data) {
		print(data);
	});
	socket.on('disconnect', function () {
		print('disconnect');
		window.location.reload(true);
	});



    window.onload = function() {
        document.getElementById("sendButton").onclick = function() {
			print("send : " +document.getElementById("sendmsg").value);
            socket.send(document.getElementById("sendmsg").value);
        }
        document.getElementById("roomButton").onclick = function() {
			print("send : " +document.getElementById("room_id").value);
        }
    }

	window.addEventListener('DOMContentLoaded', function(event) {
		console.log('DOM fully loaded and parsed');
		setChannel();
	});


	function setChannel() {
		var objData = {};
		objData.key = 'room_id';
		objData.value = document.getElementById("room_id").value;
		socket.emit('room', objData);

		// receive push data 
		socket.on(document.getElementById("room_id").value, function (data) {
			print('receive push data [' + gCnt + ' ] ' + data);
			window.scrollTo(0,document.body.scrollHeight);
			gCnt++;
			if (gCnt % _RCNT == 0) document.getElementById("output").innerHTML = '';
		});
		socket.on('chat', function (data) {
			print('[chat] receive push data : ' + data);
		});
	}
	
</script>

<body>

clear log <button id="clearButton" onClick="document.getElementById('output').innerHTML = '';">clear log</button>
<br>
roomNo <input type="text" id="room_id" value="111"><button id="roomButton">room sub</button>
<br><br>

message <input type="text" id="sendmsg" value="test message~"><button id="sendButton">chat Send</button>
<br>

<pre id="output"></pre>

</body>
</html>

output

client A

client B

ref.

... blah blah

ABOUT ME

jun's programming jun's programming