remote-controllers-manager
v0.3.6
Published
An experimental package that makes easy manage devices that can act as a remote control of your web app through an websocket connection.
Downloads
2
Maintainers
Readme
remote-controllers-manager 💻🎮
This package creates an abstraction on top of socket.io to easily manage devices (smartphones for example) that can act as a remote controller of you web app, similar to how AirConsole works.
This is a super experimental package ⚠, I'm building it for personal usage in a project but if it gets good enough may I publish to npm and make some demos.
Examples of apps I have in mind:
- Peer-to-peer games.
- TV web app interfaces.
- Collaborative playlists for parties.
Features
- ✅ Allows multiple controllers to connect to a screen.
- ✅ Define if you need a master controller and what happens if it disconnects.
- ✅ Send messages from one device to another.
- ✅ Allow multiple separate rooms.
Getting started
- Install the packages:
yarn add remote-controllers-manager socket.io socket.io-client
- Create a Node server using socket.io and apply the required middleware:
import * as io from 'socket.io'
import { applyRCMMiddleware } from 'remote-controllers-manager/server'
import { green, blue } from 'colors'
const server = io.listen(3000)
applyRCMMiddleware(server, {
// You can configure some behaviors.
maxControllersPerRoom: 4,
eachRoomNeedsAMasterController: true,
ifMasterControllerDisconnects: 'waitReconnect',
})
console.log(green('⚡ Listening on port http://localhost:3000'))
- Then create a "screen.js" file and instantiate the
Screen
class, like this:
Note that you will need a bundler.
// screen.js
import * as io from 'socket.io-client'
import { Screen } from 'remote-controllers-manager/client'
const screen = new Screen({
io,
uri: 'http://localhost:3000',
})
screen.start().then(() => {
console.log('Successfully connected to server!')
// Show screen id so user can connect
document.body.innerHTML = `SCREEN_ID = ${screen.deviceId}`
})
- Create another file called "controller.js" and instantiate the
Controller
class:
// controller.js
import * as io from 'socket.io-client'
import { Controller } from 'remote-controllers-manager/client'
const controller = new Controller({
io,
uri: 'http://localhost:3000',
})
controller.connectToScreen('<SCREEN_ID>').then(() => {
console.log('Successfully connected to screen!')
})
Just that, the package will take care of managing all controllers that connect in the room.
You can now easily send messages to all connected devices, like that:
// controller.js
// ...
document.querySelector('button').addEventListener('click', () => {
controller.sendToScreen({ eventName: 'change_title' })
})
// screen.js
// ...
screen.onMessage(({ eventName, data }) => {
if (eventName === 'change_title') {
// ...
}
})
screen.onConnect(() => {
screen.broadcastToControllers({ eventName: 'new_controller' })
})
The documentation is not written yet because the package needs to be refined, but you can see what the final API will looks like in this file.
License
MIT License