💬 Realtime Chat application made with Vue 3, Fastify and WebSocket.

Overview

💬 Chatify

Full stack Realtime Chat Application made with Vue 3, Fastify and WebSocket.

Preview

preview

Frontend Stack:

  • Vue 3 & Composition API

  • Bootstrap

  • Vite

Backend Stack:

  • Fastify

  • JSON-Server

  • WebSocket

Installation

// Install the required packages
npm install

// Run json-server/fastify & vue client
npm start

>> Chatify running at http://localhost:3000

Author

  • Aykut Sarac

License

This project is licensed under the MIT License - see the LICENSE file for details.

You might also like...
Vuejs-dashboard - A dashboard template with VueJS and Fastify
Vuejs-dashboard - A dashboard template with VueJS and Fastify

VueJS dashboard template (api & client) A simple dashboard template using MongoD

Private-Chat-with-SocketIO.JS - A simple minimal Web application to chat in private with friends
Private-Chat-with-SocketIO.JS - A simple minimal Web application to chat in private with friends

Private messaging with Socket.IO Please read the related guide: Running the fron

Leopard Chat UI - A Teneo Chat Client based on Vue and Vuetify
Leopard Chat UI - A Teneo Chat Client based on Vue and Vuetify

A Feature Rich Chat Client for Teneo About • Installation • Features • Documentation • Demo • Contributing • Author • Support • License About Leopard

Vue-chat - Chat app Vue.js & Tailwind with FireBase

Demo: https://vue-chatapp.vercel.app/ Chat app for education Vue.js Stack Vue.js

Analyze your WhatsApp Chat in Seconds. Reveal insights & get statistics, while all data stays on your device.   No chat data is sent to a server it runs only locally in your browser.
Analyze your WhatsApp Chat in Seconds. Reveal insights & get statistics, while all data stays on your device. No chat data is sent to a server it runs only locally in your browser.

WhatsAnalyze Analyze your WhatsApp Chat in Seconds Reveal insights & get statistics, while all data stays on your device. No chat data is sent to a se

This is just a test application to handle realtime with socket.io and VueJS + Vuex

Live-Chat-App This is just a test application to handle realtime with socket.io and VueJS + Vuex Why i build this Project I am currently working on a

🚀 Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.
🚀 Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

🚀 Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

Simple websocket (socket.io) plugin for Vue.js

vue-websocket A socket.io plugin for Vue.js. This package does not support native websockets. At the time, we recommend using vue-native-websocket or

native websocket with vuex integration

vue-native-websocket · native websocket implementation for Vuejs 2 and Vuex Install yarn add vue-native-websocket # or npm install vue-native-websoc

A websocket based remote event system

vue-remote A websocket based remote event system for Vue.js. Works with Vue 2.0, untested with Vue 1.0. Installation 1.) Install package via NPM npm i

This repository contains a base networking framework for building a realtime quiz platform with Ably. This project uses VueJS on the client-side and NodeJS on the server-side and is scalable as you need.
This repository contains a base networking framework for building a realtime quiz platform with Ably. This project uses VueJS on the client-side and NodeJS on the server-side and is scalable as you need.

A scalable, full-stack live quiz framework built with VueJS and NodeJS This repository contains a scalable framework for building a real-time quiz app

That´s my to DO LIST , using VUE(3.0) , VUEX, VUE ROUTING, FIREBASE REALTIME DATABASE like BE, and WAVE UI

app Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and f

Realtime social news app developed from scratch with Elixir, Phoenix, Vue and Vuex
Realtime social news app developed from scratch with Elixir, Phoenix, Vue and Vuex

Loopa News - Yet Another URL Sharing App ⚡ Loopa News is an open source social news app (ala Hacker News) built from scratch with Phoenix, Vue, Vue Ro

A Vue2 Input Streaming RealTime And Two Way Data Binding Broadcasting with Pusher
A Vue2 Input Streaming RealTime And Two Way Data Binding Broadcasting with Pusher

vue-input-streaming A Vue2 Input Streaming RealTime And two way data binding broadcasting with Pusher Setup Project # Git Clone Project git clone [email protected]

Qsee-master - Realtime queue management system for busy public offices - includes customer kiosk, agent screen and waiting room display using Web Speech API Video chat and screen sharing application based on Vue.js and WebRTC technology
Video chat and screen sharing application based on Vue.js and WebRTC technology

webrtc A video chat and screen share made with Vue.js and SkyWay (WebRTC platform) Screenshot Project setup yarn install Modify your key sed -e 's/Yo

A beautiful chat rooms component made with Vue.js - compatible with Vue, React & Angular
A beautiful chat rooms component made with Vue.js - compatible with Vue, React & Angular

A beautiful chat rooms component made with Vue.js - compatible with Vue, React & Angular

A beautiful chat rooms component made with Vue.js - compatible with Vue, React & Angular
A beautiful chat rooms component made with Vue.js - compatible with Vue, React & Angular

vue-advanced-chat Vue 3 compatibility 🚀 Features Vue, Angular & React compatibility Customizeable realtime chat messaging Backend agnostic Images, vi

Chat app made with Vue 3 & Tailwind css.

Features ⚡ Dark and light themes Message attachments Replies and pins Voice calls Settings Archive conversations Notifications Setup 🔧 1. Clone the r

Comments
  • Server can`t start

    Server can`t start

    Hi, When I use to start project, an error occurred. as follows: chatify/src/server/controllers/messages.js:58 .then((res) => res.data?.users.map((id) => 'id=' + id)); When I delete '?' Rear, server not start A 500 error is thrown when sending post and other requests. Hope to receive your reply, Thanks

    invalid 
    opened by wongbeishan 2
  • Server can`t start

    Server can`t start

    Hi, When I use to start project, an error occurred. as follows: [ chatify/src/server/controllers/messages.js:58 .then((res) => res.data?.users.map((id) => 'id=' + id)); ] When I delete '?' Rear, server not start A 500 error is thrown when sending post and other requests. Hope to receive your reply, Thanks

    opened by wongbeishan 1
  • Bump axios from 0.21.1 to 0.21.2

    Bump axios from 0.21.1 to 0.21.2

    Bumps axios from 0.21.1 to 0.21.2.

    Release notes

    Sourced from axios's releases.

    v0.21.2

    0.21.2 (September 4, 2021)

    Fixes and Functionality:

    • Updating axios requests to be delayed by pre-emptive promise creation (#2702)
    • Adding "synchronous" and "runWhen" options to interceptors api (#2702)
    • Updating of transformResponse (#3377)
    • Adding ability to omit User-Agent header (#3703)
    • Adding multiple JSON improvements (#3688, #3763)
    • Fixing quadratic runtime and extra memory usage when setting a maxContentLength (#3738)
    • Adding parseInt to config.timeout (#3781)
    • Adding custom return type support to interceptor (#3783)
    • Adding security fix for ReDoS vulnerability (#3980)

    Internal and Tests:

    • Updating build dev dependancies (#3401)
    • Fixing builds running on Travis CI (#3538)
    • Updating follow rediect version (#3694, #3771)
    • Updating karma sauce launcher to fix failing sauce tests (#3712, #3717)
    • Updating content-type header for application/json to not contain charset field, according do RFC 8259 (#2154)
    • Fixing tests by bumping karma-sauce-launcher version (#3813)
    • Changing testing process from Travis CI to GitHub Actions (#3938)

    Documentation:

    • Updating documentation around the use of AUTH_TOKEN with multiple domain endpoints (#3539)
    • Remove duplication of item in changelog (#3523)
    • Fixing gramatical errors (#2642)
    • Fixing spelling error (#3567)
    • Moving gitpod metion (#2637)
    • Adding new axios documentation website link (#3681, #3707)
    • Updating documentation around dispatching requests (#3772)
    • Adding documentation for the type guard isAxiosError (#3767)
    • Adding explanation of cancel token (#3803)
    • Updating CI status badge (#3953)
    • Fixing errors with JSON documentation (#3936)
    • Fixing README typo under Request Config (#3825)
    • Adding axios-multi-api to the ecosystem file (#3817)
    • Adding SECURITY.md to properly disclose security vulnerabilities (#3981)

    Huge thanks to everyone who contributed to this release via code (authors listed below) or via reviews and triaging on GitHub:

    ... (truncated)

    Changelog

    Sourced from axios's changelog.

    0.21.2 (September 4, 2021)

    Fixes and Functionality:

    • Updating axios requests to be delayed by pre-emptive promise creation (#2702)
    • Adding "synchronous" and "runWhen" options to interceptors api (#2702)
    • Updating of transformResponse (#3377)
    • Adding ability to omit User-Agent header (#3703)
    • Adding multiple JSON improvements (#3688, #3763)
    • Fixing quadratic runtime and extra memory usage when setting a maxContentLength (#3738)
    • Adding parseInt to config.timeout (#3781)
    • Adding custom return type support to interceptor (#3783)
    • Adding security fix for ReDoS vulnerability (#3980)

    Internal and Tests:

    • Updating build dev dependancies (#3401)
    • Fixing builds running on Travis CI (#3538)
    • Updating follow rediect version (#3694, #3771)
    • Updating karma sauce launcher to fix failing sauce tests (#3712, #3717)
    • Updating content-type header for application/json to not contain charset field, according do RFC 8259 (#2154)
    • Fixing tests by bumping karma-sauce-launcher version (#3813)
    • Changing testing process from Travis CI to GitHub Actions (#3938)

    Documentation:

    • Updating documentation around the use of AUTH_TOKEN with multiple domain endpoints (#3539)
    • Remove duplication of item in changelog (#3523)
    • Fixing gramatical errors (#2642)
    • Fixing spelling error (#3567)
    • Moving gitpod metion (#2637)
    • Adding new axios documentation website link (#3681, #3707)
    • Updating documentation around dispatching requests (#3772)
    • Adding documentation for the type guard isAxiosError (#3767)
    • Adding explanation of cancel token (#3803)
    • Updating CI status badge (#3953)
    • Fixing errors with JSON documentation (#3936)
    • Fixing README typo under Request Config (#3825)
    • Adding axios-multi-api to the ecosystem file (#3817)
    • Adding SECURITY.md to properly disclose security vulnerabilities (#3981)

    Huge thanks to everyone who contributed to this release via code (authors listed below) or via reviews and triaging on GitHub:

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by jasonsaayman, a new releaser for axios since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Aykut
Software Developer
Aykut
native websocket with vuex integration

vue-native-websocket · native websocket implementation for Vuejs 2 and Vuex Install yarn add vue-native-websocket # or npm install vue-native-websoc

Nathan 924 Dec 30, 2022
Real Time Chat Application created with VueJS, Express, Socket IO and MongoDB/Mongoose/Mongo Altas.

?? Astro Chat ?? Real Time Chat Application created with VueJS, Express, Socket IO and MongoDB/Mongoose/Mongo Altas. Contents Demo Tech Stack Features

Lu-Vuong Le 88 Jan 3, 2023
Colubrina - a simple open source chat platform written in Vue, Vuetify, NodeJS, and Socket.io.

Colubrina You can try a public instance of Colubrina at colubrina.troplo.com. This is currently beta software, and may not work as expected. Please fi

null 8 Nov 27, 2022
A template combining TypeORM, Express, Socket.io, and NuxtJS with a custom server setup using ts-node. Includes a lot of features to help bootstrap and supercharge your application.

expressive-nuxt Features 99% TypeScript and uses ts-node <3 Database management with TypeORM API with ExpressJS User authenication and sessions Email

Micheal Pearce 31 Dec 27, 2022
:v::zap: Socket.io bindings for Vue.js and Vuex (inspired by Vue-Socket.io)

Vue-Socket.io-Extended Socket.io bindings for Vue.js 2 and Vuex (inspired by Vue-Socket.io) ⚠️ The alpha version of v5 (with Vue 3 support) has been r

Max Lyashuk 629 Jan 4, 2023
😻 Socket.io implementation for Vuejs and Vuex

Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements Demo Chat Application

Metin Seylan 3.9k Jan 5, 2023
Vue integration for the Laravel Echo library.

vue-echo Vue 2 integration for the Laravel Echo library. This Vue plugin injects a Laravel Echo instance into all of your vue instances, allowing for

Kerstens Maxim 231 Nov 10, 2022
Vue socket cluster wrapper

Socket cluster implementation for Vuejs 2 leveraging uws Socket cluster documentation Install npm install vue-socket-cluster --save Usage Configuratio

Nigel Tiany 15 Jul 25, 2021
socket.io와 Vue.js로 구현한 채팅 서비스

개요 : socket.io와 Vue.js로 구현한 채팅 서비스 기간 : 2021.12.22 ~ 2021.12.23 회고 $ cd backend $ npm install $ npm run start $ cd frontend $ npm install $ npm run se

YeonHee 35 Oct 14, 2022
A sample realtime chat made with Vue and Feathers.

vue-feathers-chat A sample realtime chat made with Vue and Feathers About This project is a sample public chat, visually almost like a WhatsApp clone,

Erick Eduardo Petrucelli 50 Jun 18, 2021