sam3d / next-plugin-websocket Goto Github PK

can I deploy trpc with this package adding websocket ability to vercel? or I have to deploy to somewhere else?

Hello, I found this package in a GitHub discussion while trying to find a solution to the problem in my Next.js app and I installed it and it worked perfectly but I realized that it does not match my case.

Anyway, when I uninstalled it from my terminal using npm uninstall next-plugin-websocket and pushed my code to GitHub, deployed to Vercel. I faced the following error when building project:

This error happened because the library works by injecting a couple of micro-patches into the Next.js core and this causes error when deleting the package so please take a look and think how find a solution for this issue.

Thanks for your time and efforts.

yarn run v1.22.19
$ next
D:\Dev\nextjs_ws_apollo\node_modules\next\dist\build\utils.js:1
"httpServer: server,
^^^^^^^^^^^^^^^^^^^^

SyntaxError: Invalid or unexpected token
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at Object. (D:\Dev\nextjs_ws_apollo\node_modules\next\dist\build\worker.js:13:14)
at Module._compile (node:internal/modules/cjs/loader:1254:14)

Node.js v18.16.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The example provided in the README works perfectly, but it only illustrates how to respond back to the client when it sends something first.

How do I send something from the server to all connected clients or a particular client? Is there an exposed WebSocketServer that I am missing?

Thanks

Hello
please could you provide to me a complete example ( client / api) ?
thanks in advance
Joseph

hi sam3d,

nice job! the way use websocket is very clean and easy. today i tried this plugin , but found a error in the output log.

this.ensureApiPage is not a function!

can you give a full example ? thank u

env

{
  "name": "ws-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "13.2.4",
    "next-plugin-websocket": "^0.1.2",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

node = 16.13.2

next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
ready - loaded websocket plugin successfully
event - compiled client and server successfully in 612 ms (168 modules)
wait - compiling /_error (client and server)...
event - compiled client and server successfully in 146 ms (169 modules)
warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
wait - compiling / (client and server)...
event - compiled client and server successfully in 206 ms (213 modules)
error - unhandledRejection: TypeError: this.ensureApiPage is not a function

Expected working example:

import { NextApiHandler } from "next";
import { NextWebSocketHandler } from "next-plugin-websocket";

export const socket: NextWebSocketHandler = (client, req) => {
  console.log("Client connected");

  client.on("message", (msg) => {
    client.send(msg);
  });

  client.on("close", () => {
    console.log("Client disconnected");
  });
};

export async function GET(request: Request) {
  return new Response("Upgrade Required", {
    status: 426,
  });
}

After PR #6 has been merged it will give an error if you try and use the above example.

error - unhandledRejection: PageNotFoundError: Cannot find module for page: /api/ws
    at findPagePathData (.../node_modules/next/dist/server/dev/on-demand-entry-handler.js:272:15)
    at async Object.ensurePage (.../node_modules/next/dist/server/dev/on-demand-entry-handler.js:444:38)
    at async Server.<anonymous> (.../node_modules/next-plugin-websocket/dist/index.js:88:13) {
  code: 'ENOENT'
}

It only works with the old pages directory.