DEV Community

Anthony Jekanyika
Anthony Jekanyika

Posted on

Using Server-Sent Events (SSE) in Capacitor 8 with Nuxt 4

#sse #nuxt #vite #capacitor

Using Server-Sent Events using EventSource or microsoft's popular fetchEventSource library does work in Capacitor 8 as was clearly detailed in #6582.

Special thanks to the brilliant work done by the chatboxai team for their library capacitor-stream-http and for mbmaas3-tech who forked it and updated it to support Capacitor 8 with capacitor-stream-http-v2.

This is a demostration on how to do Server-Sent Events (SSE) in Capacitor 8 using Nuxt 4 (You can achieve the same with other Vite based frameworks).

Step 1

Clone the repo

git clone https://github.com/jeky1950/capacitor-nuxt-sse-demo.git
Enter fullscreen mode Exit fullscreen mode

Step 2

Install packages

npm Install
Enter fullscreen mode Exit fullscreen mode

Step 3

Sync the capacitor plugins

npx cap sync
Enter fullscreen mode Exit fullscreen mode

Step 4

Build the static files

npm run generate
Enter fullscreen mode Exit fullscreen mode

Step 5

Copy the static files to Capacitor

npx cap copy
Enter fullscreen mode Exit fullscreen mode

Step 6

Open Android Studio (or Xcode if you are building for iOS)

npx cap open android
Enter fullscreen mode Exit fullscreen mode

Step 7

Run the app in Android Studio (or Xcode if you are building for iOS)

Step 8

Switch on the Nuxt Development Server with the public flag

npx nuxi dev --public
Enter fullscreen mode Exit fullscreen mode

Make sure that the Network url on the command line output matches the url ref on line 18 in file /app/pages/index.vue

Command Line

VS Code

App Structure

On the app there are two buttons, the one on the left demonstrates the current functionality of trying the use SSE in Capacitor 8 that is detailed in #6582. The button on the right shows SSE working with the help of capacitor-stream-http-v2.

App Structure

Top comments (0)