Skip to content

Instantly share code, notes, and snippets.

@chabibnr
Created December 16, 2017 09:31
Show Gist options
  • Save chabibnr/12554834589d18459953ac480bcc44ba to your computer and use it in GitHub Desktop.
Save chabibnr/12554834589d18459953ac480bcc44ba to your computer and use it in GitHub Desktop.
Socket
<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>
<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>
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)
}
});
});
<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