Skip to content
peer-data

Vite

peer-data needs no setup in Vite. It is an ES module with types and no dependencies, so vite serves it and vite build bundles it like any other import:

Terminal window
npm install peer-data

BroadcastChannelSignaling needs no server, so tabs of one browser connect from the first vite run.

Signaling on Vite’s server

Section titled “Signaling on Vite’s server”

To connect browsers through socket.io while you develop, run the signaling server on Vite’s own server. Pages then reach it on the origin they were served from, with no second server or port to start. This plugin does that for vite and vite preview:

examples/socket/vite-plugin.ts
import type { Plugin } from 'vite';
import { attachSignaling } from './server.js';


/**
 * Runs the signaling server on Vite's own server, in `vite` and `vite preview`, so pages signal through `io()`
 * on the origin they were served from. Vite's server only runs while you develop: in production, run
 * attachSignaling on a server of your own.
 */
export function signaling(): Plugin {
  // socket.io would close any other WebSocket it doesn't handle, such as a proxy's, that isn't answered within a
  // second: those are left to their own handlers.
  const options = { destroyUpgrade: false };
  return {
    name: 'peer-data-signaling',
    configureServer(server) {
      // Middleware mode has no server of its own.
      if (server.httpServer) attachSignaling(server.httpServer, options);
    },
    configurePreviewServer(server) {
      attachSignaling(server.httpServer, options);
    },
  };
}

It runs the server from the signaling guide. Copy both files into your project, install socket.io for the server and socket.io-client for the pages, and add the plugin to your config:

Terminal window
npm install socket.io socket.io-client
vite.config.ts
import { defineConfig } from 'vite';
import { signaling } from './signaling/vite-plugin';


export default defineConfig({
  plugins: [signaling()],
});

The signaling server answers every request below /socket.io/, so leave the plugin out when your dev server proxies a socket.io server of your own there. Other WebSockets on Vite’s server, such as its own and those server.proxy opens, are left alone.

Pages signal through io(), which connects to the origin of the page:

import { io } from 'socket.io-client';
import { PeerData, SocketChannel } from 'peer-data';


const peer = new PeerData(new SocketChannel(io()));

vite --host serves the app on your network too, to try it on a phone. Cameras and microphones only work on localhost or over HTTPS, so for media on another device, give Vite a certificate with server.https: the plugin runs over HTTPS as well. The examples run this plugin: npm run examples in the repository.

In production

Section titled “In production”

vite build writes static files, and Vite’s server doesn’t run in production. Serve the files as you like, and run attachSignaling on a Node.js server of your own, then pass its address to io():

const peer = new PeerData(new SocketChannel(io('https://signaling.example.com')));

When the signaling server is on another origin, allow your site’s origin in its cors option, as the server shows.