Created
December 16, 2017 09:31
-
-
Save chabibnr/12554834589d18459953ac480bcc44ba to your computer and use it in GitHub Desktop.
Socket
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <iframe src="http://localhost:8087" height="300" width="200"></iframe> | |
| <iframe src="http://localhost:8087" height="300" width="200"></iframe> | |
| <iframe src="http://localhost:8087" height="300" width="200"></iframe> | |
| <iframe src="http://localhost:8087" height="300" width="200"></iframe> | |
| <iframe src="http://localhost:8087" height="300" width="200"></iframe> | |
| <iframe src="http://localhost:8087" height="300" width="200"></iframe> | |
| <iframe src="http://localhost:8087" height="300" width="200"></iframe> | |
| <iframe src="http://localhost:8087" height="300" width="200"></iframe> | |
| <iframe src="http://localhost:8087" height="300" width="200"></iframe> | |
| <iframe src="http://localhost:8087" height="300" width="200"></iframe> | |
| <iframe src="http://localhost:8087" height="300" width="200"></iframe> | |
| <iframe src="file:///E:/PROJECT/NODEJS/websocket/master.html" height="300" width="200"></iframe> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script type="text/javascript" src="http://[::1]/aegis/core/assets/js/jquery-3.1.1.min.js"></script> | |
| <script src="/socket.io/socket.io.js"></script> | |
| <script> | |
| $(function () { | |
| $("#submit-name").click(function () { | |
| var name = $("#input-name").val(); | |
| function setMessage(data) { | |
| $("#target").append('<li>'+data+'</li>') | |
| } | |
| var socket = io('http://localhost:8087'); | |
| console.log(socket) | |
| socket.on('connect', function () { | |
| socket.emit('user_joined', { | |
| 'name': name, | |
| 'id' : socket.io.engine.id | |
| }); | |
| }) | |
| socket.on('join', function (data) { | |
| setMessage(data.message) | |
| }); | |
| socket.on('info', function (data) { | |
| setMessage(data.message); | |
| $("body").scrollTop($('body').height()) | |
| }); | |
| $('#user').remove() | |
| }); | |
| }) | |
| </script> | |
| </head> | |
| <body style="overflow-x: hidden;"> | |
| <div id="user" style="position: fixed; bottom: 0; left:0; right: 0"> | |
| <input type="text" id='input-name'> | |
| <button id='submit-name'>Simpan</button> | |
| </div> | |
| <ul id='target' style="padding: 0"> | |
| </ul> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var app = require('http').createServer(handler) | |
| var sIo = require('socket.io'); | |
| var io = new sIo(app); | |
| var fs = require('fs'); | |
| app.listen(8087); | |
| function handler(req, res) { | |
| fs.readFile(__dirname + '/index.html', | |
| function (err, data) { | |
| if (err) { | |
| res.writeHead(500); | |
| return res.end('Error loading index.html'); | |
| } | |
| res.writeHead(200); | |
| res.end(data); | |
| }); | |
| } | |
| var userLists = []; | |
| io.on('connection', function (socket) { | |
| console.log('New Connection ', socket.id); | |
| socket.on('user_joined', function (data){ | |
| console.log('user Joined', data) | |
| userLists.push(data); | |
| }); | |
| socket.on('get_refresh_list', function (data){ | |
| socket.emit('refresh_list', userLists); | |
| }); | |
| socket.on('broadcast', function (data){ | |
| socket.broadcast.emit('info',{ | |
| message: 'Ping User' | |
| }); | |
| }); | |
| socket.emit('join', {message: 'Welcome User ' + socket.id}); | |
| socket.on('sendmsg', function (data) { | |
| if (io.sockets.connected[data.id]) { | |
| io.sockets.connected[data.id].emit('info', data); | |
| } else { | |
| console.log('not connected', data) | |
| } | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script type="text/javascript" src="http://[::1]/aegis/core/assets/js/jquery-3.1.1.min.js"></script> | |
| <script src="http://localhost:8087/socket.io/socket.io.js"></script> | |
| <script> | |
| var socket = io('http://localhost:8087'); | |
| socket.on('refresh_list', function (data) { | |
| console.log('refresh list',data); | |
| refreshList(data) | |
| }); | |
| function refreshList(data){ | |
| $("#socket_id").html('') | |
| $(data).each(function (index, value) { | |
| $("#socket_id").append('<option value="'+value.id+'">'+value.name+'</option>') | |
| }) | |
| } | |
| function getRefreshList(){ | |
| socket.emit('get_refresh_list','refresh') | |
| } | |
| function broadcast(){ | |
| socket.emit('broadcast','refresh') | |
| } | |
| function send() { | |
| var message = document.getElementById('socket_message'); | |
| var id = document.getElementById('socket_id'); | |
| socket.emit('sendmsg', { | |
| 'id': id.value, | |
| 'message': message.value | |
| }) | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <textarea id="socket_message"></textarea> | |
| <select id="socket_id"> | |
| </select> | |
| <button onclick="send()">Send</button> | |
| <button onclick="getRefreshList()">Refresh</button> | |
| <button onclick="broadcast()">Broadcast</button> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment