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

[YeonV]

@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]

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]

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]

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:

• Encryption & Decryption
• User Object in WebsocketProvider
• Message Handling