mevem

mevem (Message Event Emitter) is a type-safe EventEmitter designed to simplify message events.

Install

npm install mevem

Usages

// ESM
import MessageEventEmitter from 'mevem'

// CommonJS
const MessageEventEmitter = require('mevem')

// Browser
<script src="https://unpkg.com/mevem/dist/index.browser.js"></script>

Using WebSocket

// client.js
const ws = new WebSocket('ws://...')

const client = new MessageEventEmitter({
  on: fn => ws.addEventListener('message', fn),
  post: data => ws.send(data),
  deserialize: ({ data }) => JSON.parse(data),
  serialize: v => JSON.stringify(v)
})

client.on('sum', result => {
  console.log(result)
})

client.emit('sum', 1, 2, 3, 4)

// server.js
import { WebSocketServer } from 'ws'

const wss = new WebSocketServer()

wss.on('connection', ws => {
  const socket = new MessageEventEmitter({
    on: fn => ws.on('message', fn),
    post: data => ws.send(data),
    deserialize: v => JSON.parse(v),
    serialize: v => JSON.stringify(v)
  })

  socket.on('sum', (...numbers) => {
    const result = numbers.reduce((a, b) => a + b, 0)
    socket.emit('sum', result)
  })
})

Using WebWorkers

// main.js
const worker = new Worker('./worker.js')

const client = new MessageEventEmitter({
  on: fn => worker.addEventListener('message', fn),
  post: data => worker.postMessage(data),
  deserialize: ({ data }) => data
})

client.on('sum', result => {
  console.log(result)
})

client.emit('sum', 1, 2, 3)

// worker.js
const worker = new MessageEventEmitter({
  on: fn => self.addEventListener('message', fn),
  post: data => self.postMessage(data),
  deserialize: ({ data }) => data
})

worker.on('sum', (...numbers) => {
  const result = numbers.reduce((acc, cur) => acc + cur, 0)
  worker.emit('sum', result)
})

Type-Safe Events

// client emits
type ClientEmitsMap = {
  sum: (...numbers: number[]) => void
}

// server emits
type ServerEmitsMap = {
  sum: (result: number) => void
}

// client side
const client = new MessageEventEmitter<ClientEmitsMap, ServerEmitsMap>({})

// server side
const server = new MessageEventEmitter<ServerEmitsMap, ClientEmitsMap>({})

Experimental Support

const emitter = new MessageEventEmitter({
  // ...other options
  experimental: {
    returnValue: true
  }
})

const cleanUp = emitter.on('sum', (...numbers) => {
  const result = numbers.reduce((a, b) => a + b, 0)
  return result // same as emitter.emit('sum', result)
})

// cleanUp() should be used to remove the listener instead of emitter.off('sum', fn) when returnValue is true.
cleanUp()