@jamen/hyperserver v0.0.0
@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/hyperserver
Usage
server(props)
Creates a WebSocket server with
messages
handling each incomming action.host
being address of the server. (Defaults tolocalhost
)port
being 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
host
being the address of the server. (Defaults tolocalhost
)port
being 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.
7 years ago