[Example] NextJS + NextWS + Strapi [Dockerized] + [create-script]

apteryxxyz / next-ws

Add support for WebSockets in Next.js app directory.

https://npmjs.com/next-ws

170 stars 12 forks source link

[Example] NextJS + NextWS + Strapi [Dockerized] + [create-script] #31

Open YeonV opened 5 months ago

YeonV commented 5 months ago

@apteryxxyz THANK you sooo much for this wonderful project. I think, this piece is THAT GOOD, it should be included within the official nextjs....

I am at a very early stage of using your project but I have implemented it already in my app stack template, and also started developing a create-script to scaffold the whole app-stack in a docker-compose.

i thought i share it with you, maybe its helpful for someone

To get started you can use

npx create-nextws@latest

After that you have the complete stack up and running:

that script can also guide you through customization. see more here: https://github.com/YeonV/create-nextws

the base repo of the app-stack is here: https://github.com/YeonV/meeting

Notes

NextWS is used for (WIP):

signaling between clients through server
Chat between clients

Docker is needed (to benefit from full potential)

YeonV commented 5 months ago

Alright, I've implemented your basic example and it is working PERFECTLY with nextjs 14.1.4

Demo: https://meeting.yeonv.com/ (you need to login with a provider)
General Chat (messaging via NextsWS)
Personal Chat (messaging via NextsWS)
Reactions (signaling via NextsWS)

Notes:

Chats are not saved on any server! Everything is just in the localStorage of each client
state: this is still a proof of concept
NO PROPER SECURITY YET!
- Your Email-address & name are used for the userId and will be exposed for all connected clients!!!!
- isolation of client to client messaging is currently done client-side. (so if one alters the client code, one could get all messages)

To bring up the stack locally:

npx create-nextws@latest

Please make sure you provide the CLIENT_IDs and CLIENT_SECRETs via the .env file of at least one provider (github, google, ...) so users can sign in.

apteryxxyz commented 4 months ago

Just saw your messages on Discord. This is awesome! I've pinned this for now and will later add a link in the README.md.

YeonV commented 4 months ago

Added a small layer of security:

email & real-name are not exposed in plain text anymore
displayName added, to expose [NO DUPLICATE CHECK YET!]
added encryption & decryption via CryptoJS.AES (server-side)

Other Notes:

system messages (centered grey box between chat-messages)
Injected Date-system-message in rendering

Parts of intresting code: