Commit c2ab241

committed

Live table

1 parent 14039bf commit c2ab241Copy full SHA for c2ab241

File tree

+102

-0

lines changed

+102

-0

lines changed

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+node_modules`

Lines changed: 44 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,44 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html>`
	`3`	`+<body>`
	`4`	`+<h1>Live table</h1>`
	`5`	`+<table id="table"></table>`
	`6`	`+<script>`
	`7`	`+`
	`8`	`+ var table = document.getElementById('table');`
	`9`	`+ var cells = {};`
	`10`	`+ var letters = ['A', 'B', 'C', 'D'];`
	`11`	`+`
	`12`	`+ var tr, element;`
	`13`	`+ for (var i = 1; i <= 5; i++) {`
	`14`	`+ tr = document.createElement('tr');`
	`15`	`+ tr.innerHTML = letters.map(function(col) {`
	`16`	`+ return '<td><input id="' + col + i + '" type="text"></td>'`
	`17`	`+ }).join('');`
	`18`	`+ table.appendChild(tr);`
	`19`	`+ letters.forEach(function(col) {`
	`20`	`+ var cell = col + i;`
	`21`	`+ cells[cell] = document.getElementById(cell);`
	`22`	`+ cells[cell].value = cell;`
	`23`	`+ cells[cell].addEventListener('keyup', keyup);`
	`24`	`+ });`
	`25`	`+ }`
	`26`	`+`
	`27`	`+ function keyup(event) {`
	`28`	`+ socket.send(JSON.stringify({`
	`29`	`+ cell: event.target.id,`
	`30`	`+ value: event.target.value`
	`31`	`+ }));`
	`32`	`+ }`
	`33`	`+`
	`34`	`+ var socket = new WebSocket('ws://127.0.0.1/chat');`
	`35`	`+`
	`36`	`+ socket.onmessage = function(event) {`
	`37`	`+ var change = JSON.parse(event.data);`
	`38`	`+ var cell = cells[change.cell];`
	`39`	`+ cell.value = change.value;`
	`40`	`+ };`
	`41`	`+`
	`42`	`+</script>`
	`43`	`+</body>`
	`44`	`+</html>`

Lines changed: 11 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,11 @@`
	`1`	`+{`
	`2`	`+ "name": "chatExample",`
	`3`	`+ "version": "0.1.0",`
	`4`	`+ "author": "Timur Shemsedinov <timur.shemsedinov@gmail.com>",`
	`5`	`+ "description": "Websocket Chat Example",`
	`6`	`+ "license": "MIT",`
	`7`	`+ "dependencies": {`
	`8`	`+ "websocket": "1.0.x"`
	`9`	`+ },`
	`10`	`+ "readmeFilename": "README.md"`
	`11`	`+}`

Lines changed: 46 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,46 @@`
	`1`	`+global.api = {};`
	`2`	`+api.fs = require('fs');`
	`3`	`+api.http = require('http');`
	`4`	`+api.websocket = require('websocket');`
	`5`	`+`
	`6`	`+var index;`
	`7`	`+api.fs.readFile('./index.html', function(err, data) {`
	`8`	`+ index = data;`
	`9`	`+});`
	`10`	`+`
	`11`	`+var server = api.http.createServer(function(req, res) {`
	`12`	`+ if (req.url === '/') {`
	`13`	`+ res.writeHead(200);`
	`14`	`+ res.end(index);`
	`15`	`+ }`
	`16`	`+});`
	`17`	`+`
	`18`	`+server.listen(80, function() {`
	`19`	`+ console.log('Listen port 80');`
	`20`	`+});`
	`21`	`+`
	`22`	`+var ws = new api.websocket.server({`
	`23`	`+ httpServer: server,`
	`24`	`+ autoAcceptConnections: false`
	`25`	`+});`
	`26`	`+`
	`27`	`+var clients = [];`
	`28`	`+`
	`29`	`+ws.on('request', function(req) {`
	`30`	`+ var connection = req.accept('', req.origin);`
	`31`	`+ clients.push(connection);`
	`32`	`+ console.log('Connected ' + connection.remoteAddress);`
	`33`	`+ connection.on('message', function(message) {`
	`34`	`+ var dataName = message.type + 'Data',`
	`35`	`+ data = message[dataName];`
	`36`	`+ console.log('Received: ' + data);`
	`37`	`+ clients.forEach(function(client) {`
	`38`	`+ if (connection !== client) {`
	`39`	`+ client.send(data);`
	`40`	`+ }`
	`41`	`+ });`
	`42`	`+ });`
	`43`	`+ connection.on('close', function(reasonCode, description) {`
	`44`	`+ console.log('Disconnected ' + connection.remoteAddress);`
	`45`	`+ });`
	`46`	`+});`

Comments

(0)