next-ws 0.2.5 → 0.2.7

package/README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <h1><strong>Next WS</strong></h1>
   <i>Add support for WebSockets in Next.js 13 app directory</i><br>
-  <code>npm install next-ws</code>
+  <code>npm install next-ws ws</code>
 </div>
 
 <div align="center">
@@ -19,7 +19,9 @@
 
 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.
 
-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.
+> The last supported version of Next.js is 13.4.12, read more [here](https://github.com/apteryxxyz/next-ws/issues/6). 
+
+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.
 
@@ -53,7 +55,8 @@ npx next-ws-cli@latest patch
 Once the patch is complete, you will need to install the Next WS package into your project.
 
 ```sh
-npm install next-ws
+npm install next-ws ws
+# ws is a peer dependency, you must install it as well
 ```
 
 ### 🚓 Verify Patch (Optional)
@@ -161,20 +164,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
@@ -183,15 +187,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,7 +22,9 @@ 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 });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-ws",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Add support for WebSockets in Next.js 13 app directory",
   "keywords": [
     "next",

package/server/setup.js

@@ -25,7 +25,7 @@ function setupWebSocketServer(nextServer) {
             Log.error(`[next-ws] could not find module for page ${pathname}`);
             return socket.destroy();
         }
-        const socketHandler = pageModule?.routeModule?.userload?.SOCKET;
+        const socketHandler = pageModule?.routeModule?.userland?.SOCKET;
         if (!socketHandler || typeof socketHandler !== 'function') {
             Log.error(`[next-ws] ${pathname} does not export a SOCKET handler`);
             return socket.destroy();

package/server/utilities/next.d.ts

@@ -24,7 +24,7 @@ export declare function resolvePathname(nextServer: NextNodeServer, pathname: st
 export declare function getPageModule(nextServer: NextNodeServer, filename: string): Promise<PageModule>;
 export interface PageModule {
     routeModule?: {
-        userload?: {
+        userland?: {
             SOCKET?: SocketHandler;
         };
     };

package/server/utilities/patch.js

@@ -27,11 +27,11 @@ exports.getPatch = getPatch;
 function verifyPatch() {
     const patch = getPatch();
     if (!patch)
-        throw new Error('Next.js has not been patched to support Next WS, please run `npx next-ws-cli patch`');
+        throw new Error('Next.js has not been patched to support Next WS, please run `npx next-ws-cli@latest patch`');
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     const packageJson = require('next/package.json');
     const version = packageJson.version.split('-')[0];
     if (patch.version !== version)
-        throw new Error(`Next.js version mismatch, expected ${patch.version} but found ${version}, try running \`npx next-ws-cli patch\``);
+        throw new Error(`Next.js version mismatch, expected ${patch.version} but found ${version}, try running \`npx next-ws-cli@latest patch\``);
 }
 exports.verifyPatch = verifyPatch;