initial commit

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,6 @@
+# Nuxt + WS Demo
+
+Demo for [Nitro WebSocket API](https://nitro.unjs.io/guide/websocket) using [Nuxt](https://nuxt.com)
+
+> [!NOTE]
+> This demo is using [Nuxt nightly](https://nuxt.com/docs/guide/going-further/nightly-release-channel)

app.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+
+const logs = ref<string[]>([])
+
+const log = (...args: any[]) => {
+ console.log("[ws]", ...args);
+ logs.value.push(args.join(" "));
+};
+
+let ws: WebSocket | undefined
+
+const connect = async () => {
+ const isSecure = location.protocol === "https:";
+ const url = (isSecure ? "wss:https://" : "ws:https://") + location.host + "/_ws";
+
+ if (ws) {
+ log("Closing...");
+ ws.close();
+ }
+
+ log("Connecting to", url, "...");
+ ws = new WebSocket(url);
+
+ ws.addEventListener("close", () => {
+ log("Connection closed");
+ });
+
+ ws.addEventListener("error", (event) => {
+ log("Error:", event);
+ });
+
+ ws.addEventListener("message", (event) => {
+ log("Message from server:", event.data);
+ });
+
+ log("Waiting for connection...");
+ await new Promise((resolve) => ws!.addEventListener("open", resolve));
+};
+
+const clearLogs = () => {
+ logs.value = []
+};
+
+const sendPing = () => {
+ log("Sending ping...");
+ ws?.send("ping");
+};
+
+const message = ref<string>("ping")
+const sendMessage = () => {
+ ws?.send(message.value);
+};
+
+onMounted(async () => {
+ await connect();
+ sendPing();
+})
+</script>
+
+<template>
+ <div class="ms-m-5" data-theme="dark">
+ <h3>Nuxt ❤️ WS</h3>
+
+ <div class="ms-btn-group">
+ <button @click="sendPing">Send Ping</button>
+ <button @click="connect">Reconnect</button>
+ <button @click="clearLogs">Clear</button>
+ </div>
+
+ <div class="ms-form-group ms-mt-2">
+ <div class="row">
+ <div class="col-sm-6">
+ <input type="email" class="ms-secondary ms-small" id="message" placeholder="Message..." v-model="message"
+ @keydown.enter="sendMessage" />
+ </div>
+ <div class="col-sm-1">
+ <button class="ms-btn ms-secondary ms-small" @click="sendMessage">
+ Send
+ </button>
+ </div>
+ </div>
+ <br />
+ </div>
+ <pre id="logs">
+ <div v-for="log in logs" :key="log">{{ log }}</div>
+ </pre>
+ </div>
+</template>
+
+<style>
+@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/minstyle.io.min.css');
+</style>

nuxt.config.ts

@@ -0,0 +1,8 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+ nitro: {
+ experimental: {
+ websocket: true
+ }
+ }
+})

package.json

@@ -0,0 +1,19 @@
+{
+ "name": "nuxt-app",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "build": "nuxt build",
+ "dev": "nuxt dev --no-fork",
+ "generate": "nuxt generate",
+ "preview": "nuxt preview",
+ "postinstall": "nuxt prepare"
+ },
+ "dependencies": {
+ "nuxt": "npm:nuxt-nightly@latest",
+ "nitropack": "npm:nitropack-nightly@latest",
+ "nuxi": "npm:nuxi-nightly@latest",
+ "vue": "^3.4.19",
+ "vue-router": "^4.3.0"
+ }
+}