• Stars
    star
    242
  • Rank 167,048 (Top 4 %)
  • Language
    JavaScript
  • Created about 10 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Sugar for connecting socket.io to a koa instance

Build Status npm version Coverage Status Dependency Status

Koa-socket

Sugar for connecting socket.io to a koa instance

Koa-socket is now compatible with koa v2 style of middleware (where context is passed as a parameter), v0.4.0 of koa-socket is the last version to support the old style of middleware.

As such, koa-socket now requires node v4.0.0 or higher although koa-socket simply attaches to the server instance so will be compatible with a koa v1 powered app.

Installation

npm i -S koa-socket

Example

const Koa = require( 'koa' )
const IO = require( 'koa-socket' )

const app = new Koa()
const io = new IO()

app.use( ... )

io.attach( app )

io.on( 'join', ( ctx, data ) => {
  console.log( 'join event fired', data )
})

app.listen( process.env.PORT || 3000 )

Features

  • Attach socket.io to existing koa projects
  • Attach koa-style middleware to socket.io events
  • Supports koa v2 style of passing context along the response chain

Attaching to existing projects

The attach function is used to attach the IO instance to the application, this adds server* and io properties to the koa application and should happen before the app starts listening on a port.

It also re-maps app.listen to app.server.listen, so you could simply do app.listen(). However if you already had an app.server attached, it uses it instead and expects you to do app.server.listen() yourself.

const Koa = require( 'koa' )
const IO = require( 'koa-socket' )

const app = new Koa()
const io = new IO()

// Attach the socket to the application
io.attach( app )

// Socket is now available as app.io if you prefer
app.io.on( event, eventHandler )

// The raw socket.io instance is attached as app._io if you need it
app._io.on( 'connection', sock => {
  // ...
})

// app.listen is mapped to app.server.listen, so you can just do:
app.listen( process.env.PORT || 3000 )

// *If* you had manually attached an `app.server` yourself, you should do:
app.server.listen( process.env.PORT || 3000 )

Middleware and event handlers

Middleware can be added in much the same way as it can be added to any regular koa instance.

Example with async functions (transpilation required)

io.use( async ( ctx, next ) => {
  let start = new Date()
  await next()
  console.log( `response time: ${ new Date() - start }ms` )
})

There is an example in the examples folder, use npm run example-babel to fire it up. The npm script relies on the babel require hook, which is not recommended in production.

Example with generator functions

Koa v2 no longer supports generators so if you are using v2 then you must use co.wrap to have access to the generator style.

const Koa = require( 'koa' )
const IO = require( 'koa-socket' )
const co = require( 'co' )

const app = new Koa()
const io = new IO()

app.use( ... )

io.use( co.wrap( function *( ctx, next ) {
  let start = new Date()
  yield next()
  console.log( `response time: ${ new Date() - start }ms` )
}))

io.use( ... );

io.on( 'message', ( ctx, data ) => {
  console.log( `message: ${ data }` )
})

io.attach( app )
app.listen( 3000 );

Plain example

Whilst slightly unwieldy, the standalone method also works

io.use( ( ctx, next ) => {
  let start = new Date()
  return next().then( () => {
    console.log( `response time: ${ new Date() - start }ms` )
  })
})

Passed Context

let ctx = {
  event: listener.event,
  data: data,
  socket: Socket,
  acknowledge: cb
}

The context passed to each socket middleware and handler begins the chain with the event that triggered the response, the data sent with that event and the socket instance that is handling the event. There is also a shorthand for firing an acknowledgement back to the client.

As the context is passed to each function in the response chain it is fair game for mutation at any point along that chain, it is up to you to decide whether this is an anti-pattern or not. There was much discussion around this topic for koa v2.

io.use( async ( ctx, next ) => {
  ctx.process = process.pid
  await next()
})

io.use( async ( ctx, next ) => {
  // ctx is passed along so ctx.process is now available
  console.log( ctx.process )
})

io.on( 'event', ( ctx, data ) => {
  // ctx is passed all the way through to the end point
  console.log( ctx.process )
})

Namespaces

Namespaces can be defined simply by instantiating a new instance of koaSocket and passing the namespace id in the constructor. All other functionality works the same, it’ll just be constrained to the single namespace.

const app = new Koa()
const chat = new IO({
  namespace: 'chat'
})

chat.attach( app )

chat.on( 'message', ctx => {
  console.log( ctx.data )
  chat.broadcast( 'response', ... )
})

Namespaces also attach themselves to the app instance, throwing an error if the property name already exists.

const app = new Koa()
const chat = new IO({
  namespace: 'chat'
})

chat.attach( app )

app.chat.use( ... )
app.chat.on( ... )
app.chat.broadcast( ... )

The attachment is configurable if you don’t want to muddy the app object with all your namespaces.

const chat = new IO({
  namespace: 'chat',
  hidden: true
})

chat.use( ... )
chat.on( ... )

Namespaces are fairly ubiquitous so they get a dirty shorthand for creating them, note that if you want to add any additional options you’ll need to use the longhand object parameter to instantiate koaSocket.

const chat = new IO( 'chat' )

API

.attach( Koa app )

Attaches to a koa application

io.attach( app )
app.listen( process.env.PORT )

.use( Function callback )

Applies middleware to the stack.

Middleware are executed each time an event is reacted to and before the callback is triggered for an event.

Middleware with generators should use co.wrap.

Middleware functions are called with ctx and next. The context is passed through each middleware and out to the event listener callback. next allows the middleware chain to be traversed. Under the hood koa-compose is used to follow functionality with koa.

io.use( async ( ctx, next ) {
  console.log( 'Upstream' )
  await next()
  console.log( 'Downstream' )
})

.on( String event, Function callback )

Attaches a callback to an event.

The callback is fired after any middleware that are attached to the instance and is called with the ctx object and the data that triggered the event. The data can also be found on the ctx, the only potential difference is that data is the raw data emitted with the event trigger whilst ctx.data could have been mutated within the middleware stack.

io.on( 'join', ( ctx, data ) => {
  console.log( data )
  console.log( ctx.data, data )
})

.off( String event, Function callback )

Removes a callback from an event.

If the event is omitted then it will remove all listeners from the instance.

If the callback is omitted then all callbacks for the supplied event will be removed.

io.off( 'join', onJoin )
io.off( 'join' )
io.off()

.broadcast( String event, data )

Sends a message to all connections.

Running tests

npm test

License

MIT

More Repositories

1

grunt-banner

Adds a simple banner to files
JavaScript
59
star
2

yeoman-angular-express-plus

Project seed for a Yeoman generated angular app with an express/socket.io backend and some extra goodies
CSS
50
star
3

odyssey-nova

Odyssey:Nova web-only client
JavaScript
14
star
4

lerna-watch

Monorepo watch and execute commands using lerna
JavaScript
11
star
5

level-promisify

Level with es6-style promises - now with additional sublevel support
JavaScript
6
star
6

raid

Centralised state container
JavaScript
5
star
7

pixi-starfield

Starfield rendered using pixi
JavaScript
5
star
8

slush-koa-static

Super simple koa-backed static server
JavaScript
4
star
9

generator-koa-rest-api

Super simple koa restful api server
JavaScript
4
star
10

babel-preset-koa

Babel preset for koa@next and node 5
JavaScript
4
star
11

grunt-jsonmin

A grunt task wrapper for getify/JSON.minify
JavaScript
3
star
12

react-kit

React components loosely arranged into groups
JavaScript
2
star
13

svg-icon

Simple and lightweight mini-library making SVG in the DOM easy peasy
JavaScript
2
star
14

babel-preset-urban

es2015, react, class props, async
JavaScript
2
star
15

functional-javascript

Examples of functional and functional reactive programming using javascript
JavaScript
2
star
16

quay

Small keydown handler for accurately assessing keypresses
JavaScript
2
star
17

generator-pixi-babel

Yeoman generator for a pixi powered app
JavaScript
2
star
18

phaser-es2015

Short example using Phaser with some ES2015/16 stuff
JavaScript
2
star
19

levelable

Builds on sublevel and multilevel to expose a leveldb over the network
JavaScript
1
star
20

poc-react-ink

Some fun with ink
JavaScript
1
star
21

bezier-easing

Polymer wrapper around https://github.com/gre/bezier-easing. Demo at http://mattstyles.github.io/bezier-easing
JavaScript
1
star
22

lambda-snippets

Just some javascript code snippets
1
star
23

displacement-map

Midpoint displacement map
HTML
1
star
24

bent

Browser entity framework for creating a persistent connected graph
TypeScript
1
star
25

heightmap

Playing around with techniques for generating heightmaps
JavaScript
1
star
26

into-the-deep-dark

Text adventure
JavaScript
1
star
27

react-pixi-map

Renders tilemaps using @inlet/react-pixi
JavaScript
1
star
28

thread-jank-test

Testing web worker and async js jankiness https://mattstyles.github.io/thread-jank-test
JavaScript
1
star
29

nw-build-test

Test node-webkit building with browserify and 6to5
JavaScript
1
star
30

color-cli

Feed me a list of hex colours, I am hungry
JavaScript
1
star
31

preload.io

Yet another preloading implementation
JavaScript
1
star
32

koa-geo-ip

Uses ip to append geolocation
JavaScript
1
star
33

urban-input

Adds a paper-ripple to a core-input polymer element
CSS
1
star
34

wrangler

Defines and stores json models by indices within a level database
JavaScript
1
star
35

tatty-screen-scanlines

Scanlines module for tatty-screen
JavaScript
1
star
36

tatty-screen

ES6 green screen teleprinter
JavaScript
1
star
37

match

Pattern matching algorithm
JavaScript
1
star
38

vfj-blog

The theme for the veryfizzyjelly blog
JavaScript
1
star
39

koa-bunyan-log

Yet another way to attach bunyan logging to a koa instance
JavaScript
1
star
40

level-connect-client

Connects to a level-connect instance
JavaScript
1
star
41

actionkey

Creates a namespaced frozen object enum for events/actions/messages
JavaScript
1
star
42

react-pixi

Super simple react and pixi example
JavaScript
1
star
43

6to5-playground

Playground for 6to5 with browserify and gulp
JavaScript
1
star
44

tick

Framelimited raf-stream
JavaScript
1
star
45

next-preactx

Preact@>10 plugin for next
JavaScript
1
star
46

grunt-booty

grunt plugin task that populates a styles directory with bootstrap less and font-awesome less
JavaScript
1
star
47

urban-notification-bar

Animating notification bar polymer element http://mattstyles.github.io/urban-notification-bar/
JavaScript
1
star
48

star-wars

Cascading text Polymer element
Shell
1
star