A simple group chat app, built with PubNub's Vue V4 SDK, that allows users to subscribe to a channel and publish messages to the group, all in realtime. Messages are saved to the network, using Storage & Playback, so users can see past or missed messages.
- First thing first, sign up for a free PubNub account to get your Pub/Sub API keys.
-
To save the messages to history, go to your PubNub Admin Dashboard, click on the Demo Project App, or create a new app for this project, and click on Keyset. Scroll down until your get to Storage & Playback. Toggle the switch to on and keep the default values the same.
-
Clone the repo.
git clone https://github.com/ocastroa/Vue_Chat.git-
Open the project in your favorite text editor, such as VS Code or Notepad++
-
Go to main.js and replace 'publish_Key' and 'subscribe_Key' with the keys you got from Step 1.
-
Install dependencies.
npm install- Serve with hot reload at localhost:8080.
npm run dev- Copy and paste the URL to another tab, or preferably a new window, and type a message in the message input. Press 'Enter' and you should see the message in both chat logs. Enter a couple more messages, then reload the page. Since Storage & Playback was enabled, the last 6 messages (you can change this number with 100 being the max) will show on the chat log.
To learn more about this project or if you want to build this project from scratch, check out the tutorial.
