next-ws 0.2.6 → 1.0.0

package/README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <h1><strong>Next WS</strong></h1>
-  <i>Add support for WebSockets in Next.js 13 app directory</i><br>
+  <i>Add support for WebSockets in Next.js app directory</i><br>
   <code>npm install next-ws ws</code>
 </div>
 
@@ -17,14 +17,10 @@
 
 ## 🤔 About
 
-Next WS (`next-ws`) is an advanced Next.js **13** plugin designed to seamlessly integrate WebSocket server functionality into API routes within the **app directory**. With Next WS, you no longer require a separate server for WebSocket functionality.
-
-> The last supported version of Next.js is 13.4.12, read more [here](https://github.com/apteryxxyz/next-ws/issues/6). 
+Next WS (`next-ws`) is an advanced Next.js plugin designed to seamlessly integrate WebSocket server functionality into API routes within the **app directory**. With Next WS, you no longer require a separate server for WebSocket functionality.
 
 It's **important** to note that this module can only be used when working with a server. Unfortunately, in serverless environments like Vercel, WebSocket servers cannot be used. Additionally, this module was built for the app directory and is incompatible with the older pages directory.
 
-Next WS is still pre its 1.0 release, and as such, things may change. If you find any bugs or have any suggestions, please open an issue on the GitHub repository.
-
 This module is inspired by the now outdated `next-plugin-websocket`, if you are using an older version of Next.js, that module may work for you.
 
 ---
@@ -138,8 +134,6 @@ export default function Layout() {
 }
 ```
 
-To make it easier to connect to your new WebSocker server, Next WS also provides some client-side utilities. These are completely optional, you can use your own implementation if you wish.
-
 The following is the props interface for the `WebSocketProvider` component, containing all the available options.
 
 ```ts
@@ -155,6 +149,8 @@ interface WebSocketProviderProps {
 }
 ```
 
+Now you can use the `useWebSocket` hook to get the WebSocket instance, and send and receive messages.
+
 ```tsx
 // page.tsx
 'use client';
@@ -164,20 +160,21 @@ import { useCallback, useEffect, useState } from 'react';
 
 export default function Page() {
   const ws = useWebSocket();
-  //  ^? WebSocket on the client, null on the server
+  //    ^? WebSocket on the client, null on the server
 
   const [value, setValue] = useState('');
-  const [message, setMessage] = useState<string | null>('');
-
-  const onMessage = useCallback((event: MessageEvent) => {
-    const text = await event.data.text();
-    setMessage(text);
-  }, []);
+  const [message, setMessage] = useState<string | null>(null);
 
+  const onMessage = useCallback(
+    (event: MessageEvent<Blob>) =>
+      void event.data.text().then(setMessage),
+    [],
+  );
+  
   useEffect(() => {
     ws?.addEventListener('message', onMessage);
     return () => ws?.removeEventListener('message', onMessage);
-  }, [ws]);
+  }, [onMessage, ws]);
 
   return <>
     <input
@@ -186,15 +183,16 @@ export default function Page() {
       onChange={event => setValue(event.target.value)}
     />
 
-    <button onClick={() => ws.send(value)}>
+    <button onClick={() => ws?.send(value)}>
       Send message to server
     </button>
 
     <p>
       {message === null
-        ? 'Waiting for server to send a message...'
+        ? 'Waiting to receive message...'
         : `Got message: ${message}`}
     </p>
   </>;
 }
+
 ```

package/client/context.js

@@ -22,9 +22,11 @@ function WebSocketProvider({ children, url, protocols, binaryType, }) {
         return client;
     }, [isBrowser, url, protocols]);
     (0, react_1.useEffect)(() => {
-        return () => instance?.close();
+        if (instance?.readyState !== WebSocket.OPEN)
+            return;
+        return () => instance.close();
     }, []);
-    return (0, jsx_runtime_1.jsx)(exports.WebSocketContext.Provider, { value: instance, children: children });
+    return ((0, jsx_runtime_1.jsx)(exports.WebSocketContext.Provider, { value: instance, children: children }));
 }
 exports.WebSocketProvider = WebSocketProvider;
 exports.WebSocketConsumer = exports.WebSocketContext.Consumer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-ws",
-  "version": "0.2.6",
+  "version": "1.0.0",
   "description": "Add support for WebSockets in Next.js 13 app directory",
   "keywords": [
     "next",
@@ -43,7 +43,7 @@
     "@types/react-dom": "^18",
     "@types/ws": "^8",
     "eslint": "^8.43.0",
-    "next": "^13.4.6",
+    "next": "^14.0.1",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/server/utilities/next.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPageModule = exports.resolvePathname = exports.getHttpServer = void 0;
 const tslib_1 = require("tslib");
 const node_http_1 = require("node:http");
+const Log = tslib_1.__importStar(require("next/dist/build/output/log"));
 const next_server_1 = tslib_1.__importDefault(require("next/dist/server/next-server"));
 /**
  * Get the http.Server instance from the NextNodeServer.
@@ -74,12 +75,29 @@ exports.resolvePathname = resolvePathname;
  * @returns The page module.
  */
 async function getPageModule(nextServer, filename) {
-    // @ts-expect-error - hotReloader is private
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-    await nextServer.hotReloader?.ensurePage({
-        page: filename,
-        clientOnly: false,
-    });
+    try {
+        // In Next.js 14, hotReloader was removed and ensurePage was moved to NextNodeServer
+        if ('hotReloader' in nextServer) {
+            // @ts-expect-error - hotReloader only exists in Next.js 13
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            await nextServer.hotReloader?.ensurePage({
+                page: filename,
+                clientOnly: false,
+            });
+        }
+        else if ('ensurePage' in nextServer) {
+            // ensurePage throws an error in production, so we need to catch it
+            // @ts-expect-error - ensurePage is protected
+            await nextServer.ensurePage({ page: filename, clientOnly: false });
+        }
+        else {
+            // Future-proofing
+            Log.warnOnce('[next-ws] was unable to ensure page, you may need to open the route in your browser first so Next.js compiles it');
+        }
+    }
+    catch {
+        void 0;
+    }
     // @ts-expect-error - getPagePath is protected
     const builtPagePath = nextServer.getPagePath(filename);
     // eslint-disable-next-line @typescript-eslint/no-var-requires