Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Group Chat App in Vue.js

Vue Group Chat

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.

Vue Group Chat App

Setup

  1. First thing first, sign up for a free PubNub account to get your Pub/Sub API keys.
PubNub Signup
  1. 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.

  2. Clone the repo.

git clone https://github.com/ocastroa/Vue_Chat.git
  1. Open the project in your favorite text editor, such as VS Code or Notepad++

  2. Go to main.js and replace 'publish_Key' and 'subscribe_Key' with the keys you got from Step 1.

  3. Install dependencies.

npm install
  1. Serve with hot reload at localhost:8080.
npm run dev
  1. 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.

Build Your Own Group Chat App in Vue.js

To learn more about this project or if you want to build this project from scratch, check out the tutorial.

PubNub Blog

About

Group chat app in Vue.js powered by PubNub

Resources

Releases

No releases published

Packages

No packages published