@jamen/hyperserver
v0.0.0
Published
Route some actions through your server, and elsewhere offline.
Readme
@jamen/hyperserver
Tiny WebSocket server that hooks into Hyperapp
Provdies a WebSocket server that hooks into Hyperapp actions.
It adds "remote actions", which are simply actions that get their data transformed through your server. The different can be visualized as:
Normal action:
Action +---> State +---> View
Remote action:
Action +- - - - - -Offline?- - - - - - -> State +---> View
\ /
(Servers) +---Request-----Response---+Install
npm i -D @jamen/hyperserverUsage
server(props)
Creates a WebSocket server with
messageshandling each incomming action.hostbeing address of the server. (Defaults tolocalhost)portbeing port of the server. (Defaults to3001)error(err)being called
Each message looks like name(request, response). They receive and send messages formated as [name, data], which correlates to actions client-side. For example:
server({
messages: {
token (req, res) {
// Receive "token" action from client
console.log(req.data)
// Respond with "token" action on client
res.send('token', {
token: randomBytes(8).toString('hex')
})
}
}
})See below for handling responses.
remote(app, options)
An extension to Hyperapp which adds props.remote for specifying remote actions. It connects to the Hyperserver with
hostbeing the address of the server. (Defaults tolocalhost)portbeing the port of the server. (Defaults to3001)
Remote actions are like regular actions except they ask a server first.
Action +- - - - - -Offline?- - - - - - -> State +---> View
\ /
(Servers) +---Request-----Response---+An example of using the extension:
app = remote(app)
app({
state: {
count: 0
},
remote: {
add: (state, actions) => data {
return { count: data.count + 1 }
}
},
view: (state, actions) => (
h('button', { onclick: actions.add }, state.count)
)
})Everything defined in remote is available as actions everywhere else. Note remote actions take precedence of normal actions.
