Server Sent Events (SSE) and WebSockets for the remix framework

Overview

remix-sse

Publish CI Pipeline

Server Side Events (SSE) and WebSockets made easy with Remix.

Introduction

This monorepo contains several packages for working with SSE and Websockets.

  • @remix-sse/core - The base set of functionality, contains the most atomic building blocks for SSE/WebSockets

Emitters

Emitters are pre-built EventEmitter classes that allow you to easily connect to various event sources.

Examples

Check out the example projects for in-depth examples.

Quick Start

Install the core lib

npm i @remix-sse/core
  1. Setup your emitter route, here it is called /routes/emitter.tsx for simplicity

Note: This MUST be a resource route, you cannot return a component from this route.

import { EventStream } from '@remix-sse/core'
export const loader: LoaderFunction = ({ request }) => {

  // Return the EventStream from your route loader
  return new EventStream(request, (send) => {
    // In the init function, setup your SSE Event source

    // Connect to your server or "local" event emitter here
    // Check the example projects for more guidance

    // This is the EventStream cleanup function - make sure you close all active connections
    // and remove any event listeners.
    return () => {
      socket.disconnect();
    };
  });
};
  1. Call the useEventSource hook in the browser to start receiving events.
import { useEventSource } from '@remix-sse/core'
const data = useEventSource('/emitter');

Development

Coming Soon

Testing

Coming Soon

Real documentation

Coming soon

You might also like...

Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. Get a jumpstart on Remix with this workshop.

💿 Remix Fundamentals Build Better websites with Remix Remix enables you to build fantastic user experiences for the web and feel happy with the code

Nov 16, 2022

simple-remix-blog is a blog template built using Remix and TailwindCSS. Create your own blog in just a few minutes!

simple-remix-blog is a blog template built using Remix and TailwindCSS. Create your own blog in just a few minutes!

simple-remix-blog is a blog template built using remix.run and TailwindCSS. It supports markdown and MDX for the blog posts. You can clone it and star

Nov 10, 2022

A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email.

A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email.

Strapi PasswordLess Plugin A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email. A pl

Nov 14, 2022

❌ Disable spam emails sent by the Claremont Colleges.

❌ Disable spam emails sent by the Claremont Colleges.

Claremont Spam Disabler Have you ever had the misfortune of seeing an email like this? Most likely not, unless you at one point attended a college in

Jun 5, 2022

The Remix version of the fakebooks app demonstrated on https://remix.run. Check out the CRA version: https://github.com/kentcdodds/fakebooks-cra

Remix Fakebooks App This is a (very) simple implementation of the fakebooks mock app demonstrated on remix.run. There is no database, but there is an

Nov 25, 2022

Remix Stack for deploying to Vercel with remix-auth, Planetscale, Radix UI, TailwindCSS, formatting, linting etc. Written in Typescript.

Remix Stack for deploying to Vercel with remix-auth, Planetscale, Radix UI, TailwindCSS, formatting, linting etc. Written in Typescript.

Remix Synthwave Stack Learn more about Remix Stacks. npx create-remix --template ilangorajagopal/synthwave-stack What's in the stack Vercel deploymen

Nov 24, 2022

It's the ragemp server middlewares for events

RageMP Server Middlewares Данный пример промежуточных функций разработан, чтобы любые другие разработчики могли им пользоваться. Документация: App App

Sep 8, 2022

A bot to propose events for a discord server.

Project Name Project Description Live Version This page is not yet deployed. Feedback and Bugs If you have feedback or a bug report, please feel free

Nov 2, 2022

Monolithic repo for api server, image server, web server

Onsecondary Market Deployed at https://market.onsecondary.com Monolithic repo for api server, image server, web server TODO -use a script to cull expi

Jan 11, 2022
Comments
  • The automated release is failing 🚨

    The automated release is failing 🚨

    :rotating_light: The automated release from the main branch failed. :rotating_light:

    I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

    You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

    Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

    Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

    If you are not sure how to resolve this, here are some links that can help you:

    If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


    No npm token specified.

    An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

    Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.


    Good luck with your project ✨

    Your semantic-release bot :package::rocket:

    semantic-release 
    opened by dan-cooke 0
Releases(v1.0.0)
Owner
Baggers
Stock market research for retail investors
Baggers
Lightweight, fast and framework-agnostic sse service for NodeJS

SSE service Lightweight, fast and framework-agnostic sse service for NodeJS Written on TS. Features Could be embedded to Express, Fastify, Nest, etc.

null 9 Nov 14, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 13 Jul 1, 2022
A POC of a Discord.js bot that sends 3D rendering instructions to a Go server through gRPC which responds with the image bytes which are then sent back on Discord.

A POC of a Discord.js bot that sends 3D rendering instructions to a Go server through gRPC which responds with the image bytes which are then sent back on Discord.

Henrique Corrêa 5 Jan 8, 2022
Verify your E-Mail and Phone Number using link sent over mail and sms.

Phone-and-Mail-Verification-With-Link Verify your E-Mail and Phone Number using link sent over mail and sms. Endpoints POST /user/create Body { "n

Prasoon Soni 5 Sep 14, 2022
Verify your E-Mail and Phone Number using link sent over mail and sms.

Send Verification Link ✅ Explore the docs » • Report Bug • Request Feature • About The Project Verify your E-Mail and Phone Number using link sent ove

Prasoon Soni 4 Jun 28, 2022
Projeto de Botnet com Python, Websockets, Async e Javascript

A3 - Botnets Este é um repositório onde documentarei todo o processo de pesquisa e desenvolvimento de uma botnet do zero com python, websockets e asyn

Luiz Melo 15 Sep 23, 2022
Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this workshop, we'll look at some more advanced use cases when building Remix applications.

?? Advanced Remix Workshop Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this

Frontend Masters 164 Nov 23, 2022