Last updated: 2021-02-21, tested with socket.io v3.1.1
This is the simplest implementation you will find for a client/server WebSockets architecture using socket.io.
To see a full explanation, read my answer on SO here: https://stackoverflow.com/a/24232050/778272.
If you're looking for examples using frameworks, check these links:
| // sending to sender-client only | |
| socket.emit('message', "this is a test"); | |
| // sending to all clients, include sender | |
| io.emit('message', "this is a test"); | |
| // sending to all clients except sender | |
| socket.broadcast.emit('message', "this is a test"); | |
| // sending to all clients in 'game' room(channel) except sender |
| // set-up a connection between the client and the server | |
| var socket = io.connect(); | |
| // let's assume that the client page, once rendered, knows what room it wants to join | |
| var room = "abc123"; | |
| socket.on('connect', function() { | |
| // Connected, let's sign-up for to receive messages for this room | |
| socket.emit('room', room); | |
| }); |
| // set-up a connection between the client and the server | |
| var socket = io.connect(); | |
| // let's assume that the client page, once rendered, knows what room it wants to join | |
| var room = "abc123"; | |
| socket.on('connect', function() { | |
| // Connected, let's sign-up for to receive messages for this room | |
| socket.emit('room', room); | |
| }); |
| "use strict"; | |
| // Licensed by MIT License | |
| // You can use the gist to init your web component. | |
| customElements.define('web-component', | |
| class extends HTMLElement { | |
| #root; | |
| constructor() { |
| /** | |
| * @author | |
| * David Rivera (jherax) | |
| * https://github.com/jherax | |
| */ | |
| /* eslint-disable no-bitwise */ | |
| /** @private */ | |
| const toString = Object.prototype.toString; |
| // Built with IMPACT - impactjs.org | |
| (function (window) { | |
| "use strict"; | |
| Number.prototype.map = function (istart, istop, ostart, ostop) { | |
| return ostart + (ostop - ostart) * ((this - istart) / (istop - istart)); | |
| }; | |
| Number.prototype.limit = function (min, max) { | |
| return Math.min(max, Math.max(min, this)); | |
| }; | |
| Number.prototype.round = function (precision) { |
| function findMidiDevices(name) { | |
| return navigator | |
| .requestMIDIAccess() | |
| .then((midiAccess) => { | |
| let input, output; | |
| midiAccess.inputs.forEach((currentInput) => { | |
| if(currentInput.name === name) input = currentInput; | |
| }); | |
| midiAccess.outputs.forEach((currentOutput) => { | |
| if(currentOutput.name === name) output = currentOutput; |
| var select = document.createElement('select'); | |
| var selectedPort = null; | |
| var onMessage = function (event) { | |
| // TODO: Use the message | |
| }; | |
| var selectPort = function (id) { | |
| var newPort = midiAccess.inputs.get(id); |
| function getAudioData (url, time) { | |
| return new Promise(function (resolve, reject) { | |
| var context = new AudioContext(); | |
| var track = new Audio(url); | |
| var bufferLength = time * context.sampleRate; | |
| var buffer = new Float32Array(bufferLength); | |
| var collector = context.createScriptProcessor(0, 1); | |
| var audioSource = context.createMediaElementSource(track); | |
| var samplesCollected = 0; |