## Introduction Real-time communication has become a core feature in modern applications, enabling users to connect instantly through voice, video, or text across different devices and locations. In this article, you'll learn how to build a real-time voice chat application using [Strapi 5](https://strapi.io/five), [Vue.js](https://strapi.io/integrations/vuejs-cms), and [WebRTC](https://webrtc.org/). Strapi 5 will be used for the back-end CMS, Vue.js will handle the user interface and layout, and WebRTC will be used for real-time communication. Specifically, we'll use PeerJS, a library that simplifies the process of setting up WebRTC peer-to-peer connections. ## Tutorial Objective By the end of this tutorial, you will have achieved the following: * Learn how to build a fully functional real-time voice chat application * Understand the differences between WebRTC and WebSockets. * Implement event broadcasting using WebSockets. * Use WebRTC for main real-time chat. * Utilize Strapi lifecycle functions. Let's get started! ## Prerequisites Before you dive into the article, make sure you have the following: - [Node.js](https://nodejs.org/en/download/package-manager)(v18 or later) and Npm installed - Basic understanding of JavaScript and Vue.js - Knowledge of [WebSockets](https://www.pubnub.com/guides/websockets/) - A code editor - [Firefox browser](https://www.mozilla.org/en-US/firefox/new/) installed ## Understanding WebRTC ### What is WebRTC? WebRTC (Web Real-Time Communication) is an open-source technology that enables real-time communication between devices and browsers. It supports real-time audio and video communication, file sharing, and more. WebRTC establishes connections between devices using a process called signalling. The signalling process involves exchanging information, such as network details and capabilities, between clients before establishing the direct WebRTC connection. A signalling server acts as an intermediary to relay this information between clients. Once signalling is complete, the media data (audio, video, files) flows directly between clients without passing through the signalling server. The diagram below illustrates this concept. ![WebRTC Signalling Process.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Web_RTC_Signalling_Process_d08cf703b8.png) ### WebRTC vs WebSockets While both WebRTC and WebSockets enable real-time communication, they use different approaches. WebRTC is designed for direct, peer-to-peer communication between clients without requiring an intermediary server. It establishes a direct connection between participating clients, allowing them to exchange data, audio, and video directly. In contrast, WebSockets rely on a central server for communication. Clients connect to the WebSocket server and exchange messages bidirectionally through this server. All data must pass through the server, which can introduce latency. The difference is shown in the image below. ![WebRTC vs WebSockets.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Web_RTC_vs_Web_Sockets_836eae1bcf.png) ## Setting up the Backend with Strapi 5 ### Create a new Strapi 5 Project First, open a new terminal instance. Navigate to a preferred directory and run the following command to create a new [Strapi 5](https://strapi.io/five) project. ```bash mkdir voice-chat-application cd voice-chat-application npx create-strapi@latest voice-chat-api --quickstart ``` This command creates a new Strapi 5 folder `voice-chat-api` in the `voice-chat-application` folder. After installation completes, your browser will open a page prompting you to create an admin account, as shown below: ![Create admin user in Strapi.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Create_admin_user_in_Strapi_8804a39387.png) Enter your details in the form to access the admin dashboard: ![strapi admin dashboard.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/strapi_admin_dashboard_f09f380637.png) In the next section, you'll create test users that you'll use to test your application later on. ### Create User Entries With the server running, create test users for the application. Navigate to the Content Manager section in the admin dashboard and select **Create New Entry** as shown here: ![create new user.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/create_new_user_39538b114d.png) Fill in the user details and click save: ![Fill in User Details.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Fill_in_User_Details_e6cd5d3565.png) Repeat this process once more to create a second test user. Now that the Strapi server is set up and you have test users, you can proceed with integrating WebSockets using [Socket.IO](https://socket.io/). Open the project in your preferred IDE or text editor. ## Integrate WebSockets with Strapi WebSockets will be used for two key purposes in this application: 1. Managing user presence by tracking which users are currently online. 2. Handling call signalling by broadcasting events between users when: - A user initiates a call - A user accepts a call - A user rejects a call To integrate WebSockets into your Strapi 5 backend, you'll need to install Socket.IO. In a new terminal instance, navigate to your chosen directory and run the following command: ```bash! npm install socket.io @types/socket.io ``` After installation is done, navigate to `src/index.ts`. Import and declare the Socket.IO module with the following lines of code. ```typescript import { Server } from "socket.io"; import type { Core } from "@strapi/strapi"; declare module "socket.io" { interface Socket { userId?: number; username?: string; } } ``` Next, create a new Socket.IO connection by updating the `bootstrap` method in the `index.ts` file. ```typescript export default { register() {}, async bootstrap({ strapi }: { strapi: Core.Strapi }) { const io = new Server(strapi.server.httpServer, { cors: { origin: ["http://localhost:8080"], methods: ["GET", "POST"], credentials: true, }, path: "/ws", }); ``` The code snippet above uses Strapi's bootstrap [lifecycle function](https://docs.strapi.io/dev-docs/configurations/functions#bootstrap) to create a new Socket.IO server instance and configure the path and origin for the frontend application. ### Handle WebSocket Events on Strapi Server After creating a new instance of the Socket.IO server, the next step is to add a setup for listening to events. Update your `src/index.ts` file with the code snippet below. ```typescript const onlineUsers: Record = {}; io.on("connection", (socket) => { //Events for when a socket.on("userConnected", ({ userId, username }) => { socket.userId = userId; socket.username = username; socket.join(userId.toString()); onlineUsers[userId] = username; io.emit("updateOnlineUsers", onlineUsers); console.log(`User ${username} connected and joined room ${userId}`); }); socket.on("disconnect", () => { if (!socket.userId) return; delete onlineUsers[socket.userId]; io.emit("updateOnlineUsers", onlineUsers); console.log(`User ${socket.username} disconnected`); }); socket.on("initiateCall", ({ callerId, callerUsername, calleeId }) => { console.log(`Initiating call from ${callerId} to ${calleeId}`); const calleeRoom = calleeId.toString(); if (!io.sockets.adapter.rooms.has(calleeRoom)) { console.log(`Room for calleeId ${calleeId} does not exist. Cannot emit incoming call.`); return; } io.to(calleeRoom).emit("incomingCall", { from: callerId, username: callerUsername, }); console.log(`Incoming call event emitted to user ${calleeId} in room ${calleeRoom}`); }); socket.on("callRejected", ({ callerId, message }) => { const callerSocketId = onlineUsers[callerId]; if (!callerSocketId) { console.log(`Caller with user ID ${callerId} is not online`); return; } io.to(callerSocketId).emit("callRejected", { message }); console.log("callRejected sent to socket:", callerSocketId); }); socket.on("acceptCall", ({ callerId, calleeId, calleeUsername }) => { io.to(callerId).emit("callAccepted", { by: calleeId, username: calleeUsername, }); }); }); }, }; ``` The code snippet above first initializes a variable named `onlineUsers`. It then defines five events that dispatch on specified conditions: - `userConnected`: Fired when a user connects. Saves the user’s details, joins a room, and updates the list of online users. - `disconnect`: Fired when a user disconnects. Removes the user from the online users list and notifies others. - `initiateCall`: Fired when a user initiates a call. Checks if the callee is online and sends an "incomingCall" event to their room. - `callRejected`: Fired when a call is rejected. Notifies the caller with a rejection message. - `acceptCall`: Fired when a call is accepted. Notifies the caller that the call was accepted. ## Configure WebRTC Signaling Server with PeerJS [PeerJS](https://peerjs.com/) is a library that simplifies peer-to-peer communication. It acts as a wrapper around the browser's WebRTC implementation to provide an easy way of implementing WebRTC in applications. To set up the WebRTC signalling server, install the Peer server globally by running this command: ```bash npm install peer -g ``` After a successful installation, start the signalling server with this command: ```bash peerjs --port 9000 --key peerjs --path /myapp ``` > **NOTE**: The command above can be run from anywhere in your terminal. This is because we installed the `peer` package globally. The command above starts the PeerJS signaling server, configuring it to run on port 9000, with an authentication key of 'peerjs', and listening on the `/myapp` path. With your signalling server setup, you can now proceed with building the user interface of the chat application. ## Setting up the Frontend with Vue.js Now that the backend part of the voice chat application is fully set up, it’s time to build the user interface of the application. ### Create a new Vue.js Project Navigate to the project folder created earlier and create a new Vue.js project using this command: ``` bash cd voice-chat-application npx @vue/cli create voice-chat-frontend ``` When prompted, select the Vue 3 default option. ```bash Vue CLI v5.0.8 ? Please pick a preset: (Use arrow keys) ❯ Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features ``` ### Install Necessary Dependencies After creating the new project, install all the dependencies needed for the Vue.js app's real-time functionality. Run this command in your terminal: ```bash cd voice-chat-frontend npm install axios socket.io-client vuex vue-router peerjs ``` The following packages will be installed: - **[axios](https://axios-http.com/docs/intro)**: For making HTTP requests to the Strapi 5 server - **[socket.io-client](https://socket.io/docs/v4/client-api/)**: For receiving and emitting events to and from the Socket.IO server - **[vuex](https://vuex.vuejs.org/)**: For managing state throughout the application - **[vue-router](https://router.vuejs.org/)**: For handling routing - **[peerjs](https://peerjs.com/)**: For connecting browsers for real-time voice chat functionality using WebRTC ### Set Up Vuex for State Management After installing the necessary dependencies, set up the store for user state management. In the `src/` folder, create two new folders named `router` and `store`. Then create a file named `index.js` in each folder. Navigate to `src/store/index.js` and add the code for the Vuex store. ```javascript import { createStore } from "vuex"; import axios from "axios"; import io from "socket.io-client"; export default createStore({ state: { user: JSON.parse(localStorage.getItem("user")) || null, token: localStorage.getItem("token") || null, socket: null, }, mutations: { setUser(state, user) { state.user = user; localStorage.setItem("user", JSON.stringify(user)); }, setToken(state, token) { state.token = token; localStorage.setItem("token", token); }, setSocket(state, socket) { state.socket = socket; }, }, actions: { async login({ commit, dispatch }, { identifier, password }) { try { const response = await axios.post( "http://localhost:1337/api/auth/local", // Strapi login endpoint { identifier, password, } ); const { user, jwt } = response.data; commit("setUser", user); commit("setToken", jwt); // Initialize socket after login await dispatch("initializeSocket"); } catch (error) { console.error("Login failed:", error); throw error; } }, async initializeSocket({ commit, state }) { if (!state.user) return; // Ensure user is logged in before connecting // Initialize socket connection const socket = io("http://localhost:1337", { transports: ["websocket"], path: "/ws", reconnection: true, reconnectionDelay: 1000, reconnectionDelayMax: 5000, reconnectionAttempts: 5, }); socket.on("connect", () => { console.log("Connected to WebSocket server"); socket.emit("userConnected", { userId: state.user.id, username: state.user.username }); }); socket.on("disconnect", () => { console.log("Disconnected from server"); // socket.emit("userDisconnected", { userId: state.user.id }); }); // Store socket instance in state commit("setSocket", socket); }, logout({ commit, state }) { // Remove user data from local storage localStorage.removeItem("user"); localStorage.removeItem("token"); // Disconnect socket if it exists if (state.socket) { state.socket.emit("userDisconnected", { userId: state.user.id }); state.socket.disconnect(); } // Clear state commit("setUser", null); commit("setToken", null); commit("setSocket", null); }, }, }); ``` In the code above, the Vuex store manages user authentication, state persistence, and real-time communication. It tracks the user's information, authentication token, and WebSocket instance in the state. The mutations section modifies the user, token, and socket instance in both the state and localStorage while actions handle tasks like logging in (storing user data and token), initializing the WebSocket connection, and logging out. ### Set up Vue Router Next, set up Vue Router to handle navigation between different views in the application. Add the routing configuration to `src/router/index.js`. ```javascript import { createRouter, createWebHistory } from "vue-router"; import LoginView from "../components/LoginView.vue"; import DashboardView from "../components/DashboardView.vue"; import CallView from "../components/CallView.vue"; import store from "../store"; const routes = [ { path: "/", redirect: "/login" }, { path: "/login", component: LoginView }, { path: "/dashboard", name: "dashboard", component: DashboardView, meta: { requiresAuth: true }, }, { path: "/call/:userId/:username", name: "call", component: CallView, props: true, meta: { requiresAuth: true }, }, ]; const router = createRouter({ history: createWebHistory(), routes, }); // Navigation guard router.beforeEach((to, from, next) => { const isAuthenticated = store.state.user || localStorage.getItem("user"); if (to.meta.requiresAuth && !isAuthenticated) { next("/login"); } else { next(); } }); export default router; ``` In the code above, a Vue Router instance is configured to handle navigation in the voice chat application. Routes are set up for authentication, and specific views are provided for the dashboard and calling functionality. The `router.beforeEach` navigation guard checks if the user is authenticated before allowing access to routes with `requiresAuth`. ### Update App.vue and main.js Files To set up the basic structure and style for your Vue.js application, update the `App.vue` and `main.js` files. These files create the main layout and initialize the app. Navigate to `src/App.vue` and update it with the following lines of code. ```javascript ``` Next, navigate to `src/main.js` and update it with this code: ```javascript import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; createApp(App).use(router).use(store).mount("#app"); ``` The `App.vue` file serves as the main layout for your app. Inside the `

Voice Chat App

Voice Chat App

Welcome, {{ user.username }}

Online Users

Call with {{ callee.username }}

Voice Chat App

Voice Chat App

Login

Welcome, {{ user.username }}

Online Users

Incoming Call from {{ incomingCall.username }}

Call with {{ callee.username }}