Skip to content
Web client for üWave, the federated collaborative listening platform.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Add WIP Mobile layout (#514) Mar 29, 2018
locale Migrate many things away from HOCs (#1257) Jul 29, 2019
packages/u-wave-web-middleware Create a separate u-wave-web-middleware package. (#1018) Jul 29, 2019
src Refactor `TextField` to make eslint happy. Sep 19, 2019
static privacy: Fix logo size. (#615) Apr 21, 2017
tasks Update eslint. (#1272) Sep 14, 2019
test Add a test for #1090 (#1091) May 10, 2019
.babelrc.js Create a separate u-wave-web-middleware package. (#1018) Jul 29, 2019
.browserslistrc Update eslint-plugin-compat and polyfills. (#1235) May 11, 2019
.editorconfig init package/editorconfig/readme Sep 12, 2015
.eslintignore Create a separate u-wave-web-middleware package. (#1018) Jul 29, 2019
.eslintrc.json Update eslint. (#1272) Sep 14, 2019
.gitignore Add test coverage with `nyc`. (#707) Jul 14, 2017
.npmignore Create a separate u-wave-web-middleware package. (#1018) Jul 29, 2019
.nycrc Babel 7 (#858) Apr 10, 2018
.stylelintrc Add stylelint (#1228) May 10, 2019
.travis.yml Create a separate u-wave-web-middleware package. (#1018) Jul 29, 2019 1.11.6 Sep 1, 2018 doc: add code of conduct Jan 9, 2017
LICENSE Initial commit Sep 12, 2015 Create a separate u-wave-web-middleware package. (#1018) Jul 29, 2019
gulpfile.js Create a separate u-wave-web-middleware package. (#1018) Jul 29, 2019
middleware.js Create a separate u-wave-web-middleware package. (#1018) Jul 29, 2019
package-lock.json Do `npm update` Sep 19, 2019
package.json Do `npm update` Sep 19, 2019
postcss.config.js Switch to postcss-preset-env (#1077) Jul 17, 2018
webpack.config.js Use esm versions of all material-ui packages Aug 25, 2019


Web client for üWave.

Dependencies - Setup - Building - Server API - Client API - License



For running in the browser: something modern. The aim is to support ~IE11+ and other modern browsers (recent Chromes and Firefoxes, at least). If you use something reasonably recent and üWave doesn't work, file a bug!

The server parts of üWave require Node version >= 8.9.

Getting Things Working

To run the web client, you need an HTTP API. For development, follow the HTTP API development server guide. Then,

# Make u-wave-http-api globally available
cd /path/to/u-wave-http-api
npm link
cd ../

git clone u-wave-web
cd u-wave-web
npm install
npm link u-wave-http-api
npm start

…and now you should be good to go! npm start will automatically start the HTTP API development server.

If you are running the development server yourself, you can do:

npm start -- --no-api

Then it won't start a new HTTP API development server, and instead assumes one is already running on localhost:6042.


There are two main build scripts: one for development, and one for production.

The development script runs a local üWave server and auto-reloads the web client when you make changes.

npm start # or `npm run dev`

When building the üWave web client for use on a server, the production build should be used instead. It removes costly debugging helpers from the code and minifies everything as much as possible.

npm run prod

The prod script doesn't run a local server. To try out your production build, you can use the standalone serve script:

npm run serve

Server API

import createWebClient from 'u-wave-web-middleware';

createWebClient(uw, options={})

Create a Web client middleware for use with express-style server libraries.



This is a small example üWave server on top of Express, using ReCaptcha and EmojiOne emoji from u-wave-web-emojione.

import express from 'express';
import uwave from 'u-wave-core';
import createHttpApi from 'u-wave-http-api';
import createWebClient from 'u-wave-web-middleware';
import emojione from 'u-wave-web-emojione';

const app = express();
const uw = uwave({ /* Options. See the u-wave-core documentation. */ });


app.use('/api', createHttpApi(uw, {
  /* Options. See the u-wave-http-api documentation. */

app.use('/assets/emoji', emojione.middleware());
app.use('/', createWebClient(uw, {
  apiBase: '/api',
  emoji: emojione.emoji,
  recaptcha: { key: 'my ReCaptcha site key' },

Client API

import Uwave from 'u-wave-web'

const uw = new Uwave(options={})

Create a new üWave web client.


  • options
    • options.apiBase - Base URL to the mount point of the üWave Web API to talk to. Defaults to /api, but it's recommended to set this explicitly.

    • options.emoji - An object describing the emoji that will be available in the chat. Keys are emoji shortcodes (without :), and values are image filenames.

    • options.recaptcha - An object containing ReCaptcha options used to ensure new user registrations are human. This option should only be passed if the Web API middleware is configured to check for ReCaptcha entries.

    • options.title - Document title, what's shown in the tab by the browser. Default "üWave".

uw.source(sourceType, sourcePlugin, options={})

Add a media source. Media sources should also be registered with the üWave Core module on the server side.


  • sourceType - String representing the source type. Must be the same as the one used on the server side.
  • sourcePlugin - Factory function for the plugin. This factory function will receive two arguments: the Uwave class instance, and the options object passed to .source().
  • options - Options to be passed to the source plugin.


import youTubeSource from 'u-wave-web-youtube';

uw.source('youtube', youTubeSource);


Start the web client and render it into a DOM element.


  • target - A DOM element.




The üWave web client is licensed under the MIT license.

The default mention sound file comes from a pack and is under the License (archive link).

You can’t perform that action at this time.