Skip to content

Instantly share code, notes, and snippets.

@jrichardsz

jrichardsz/client.html

Forked from crtr0/client.js
Last active January 10, 2024 01:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jrichardsz/4595dfc113ded48d54843554b71824b9 to your computer and use it in GitHub Desktop.
Save jrichardsz/4595dfc113ded48d54843554b71824b9 to your computer and use it in GitHub Desktop.
Download ZIP
socket.io nodejs snippets
Raw
client.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.3/socket.io.js"
integrity="sha512-jDUVpk2awjMnyrpY2xZguylQVRDeS9kRBImn0M3NJaZzowzUpKr6i62ynwPG0vNS1+NsTk4ji+iznbc5m0ZCKQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="icon" href="data:,">
</head>
<body>
<div id="inputs" style="margin:10px">
<span>url: </span><input id="url" style="width: 80%;" value="http://localhost:2105"></input>
<button id="connect_disconnect_button">Connect</button>
</div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Message</a></li>
<li><a href="#tabs-2">Events</a></li>
<li><a href="#tabs-3">Params</a></li>
<li><a href="#tabs-4">Headers</a></li>
<li><a href="#tabs-5">Settings</a></li>
</ul>
<div id="tabs-1">
<textarea name="message" id="message" style="width: 100%;" rows="10"></textarea>
<select name="message-type" id="message-type">
<option value="json">json</option>
<option value="text">text</option>
<option value="binary">binary</option>
</select>
<input id="emit-event-name"></input>
<button id="emit-event-button">Send</button>
</div>
<div id="tabs-2">
<div class="container pt-4">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">
Event name
</th>
<th class="text-center">
Enabled/Disabled
</th>
<th class="text-center">
Description
</th>
<th class="text-center">
Manage
</th>
</tr>
</thead>
<tbody id="events_table">
</tbody>
</table>
</div>
<button class="btn btn-md btn-primary" id="addBtn" type="button">
Add new event
</button>
</div>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula
accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu
urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem
enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla
facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti.
Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio.
Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat
porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas
commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
<div id="tabs-4">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula
accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu
urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem
enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla
facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti.
Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio.
Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat
porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas
commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
<div id="tabs-5">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula
accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu
urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem
enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla
facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti.
Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio.
Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat
porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas
commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-left" style="width: 25%;">
Event name
</th>
<th class="text-left" style="width: 25%;">
Date
</th>
<th class="text-left" style="width: 40%;">
Message
</th>
</tr>
</thead>
<tbody id="log">
</tbody>
</table>
</div>
<div id="chat" style="font-size:30"></div>
<script>
var isConnected = false;
var socket;
$(function () {
$("#tabs").tabs();
let count = 1;
// Adding row on click to Add New Row button
$('#addBtn').click(function () {
let dynamicRowHTML = `
<tr class="rowClass"">
<td class="row-index text-center">
<input id="event_${count}" style="width: 80%;">
</td>
<td class="row-index text-center">
<input type="checkbox" id="status_${count}">
</td>
<td class="row-index text-center">
<textarea id="description_${count}" style="width: 100%;"></textarea>
</td>
<td class="text-center">
<button class="btn btn-danger remove"
type="button">Remove
</button>
</td>
</tr>`;
$('#events_table').append(dynamicRowHTML);
count++;
});
// Removing Row on click to Remove button
$('#events_table').on('click', '.remove', function () {
$(this).parent('td.text-center').parent('tr.rowClass').remove();
});
});
$('#connect_disconnect_button').click(function () {
socket = io.connect($('#url').val());
isConnected = true;
$("#connect_disconnect_button").text('Disconnect');
$("#events_table :input[id^='event_']").each(function (i, el) {
var eventName = $(el).val().trim();
socket.on(eventName, function (data) {
let dynamicRowHTML = `
<tr class="rowClass"">
<td class="text-left" style="width: 25%;">
<p>${eventName}</p>
</td>
<td class="text-left" style="width: 25%;">
<p>${new Date().toISOString()}</p>
</td>
<td class="text-left" style="width: 40%;">
<p>${JSON.stringify(data)}</p>
</td>
</tr>`;
$('#log').append(dynamicRowHTML);
});
});
// socket.emit('setName', $('#username').val())
})
$('#emit-event-button').click(function () {
var targetEventName = $('#emit-event-name').val();
var string = $('#message').val();
var message = JSON.parse(string);
socket.emit(targetEventName, message)
let dynamicRowHTML = `
<tr class="rowClass"">
<td class="text-left" style="width: 25%;">
<p>${targetEventName}</p>
</td>
<td class="text-left" style="width: 25%;">
<p>${new Date().toISOString()}</p>
</td>
<td class="text-left" style="width: 40%;">
<p>${string}</p>
</td>
</tr>`;
$('#log').append(dynamicRowHTML);
})
</script>
</body>
</html>
Raw
server.js
// attach Socket.io to our HTTP server
io = socketio.listen(server);
// handle incoming connections from clients
io.sockets.on('connection', function(socket) {
// once a client has connected, we expect to get a ping from them saying what room they want to join
socket.on('room', function(room) {
socket.join(room);
});
});
// now, it's easy to send a message to just the clients in a given room
room = "abc123";
io.sockets.in(room).emit('message', 'what is going on, party people?');
// this message will NOT go to the client defined above
io.sockets.in('foobar').emit('message', 'anyone in this room yet?');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment