2021-07-02
6929
Jeremy Kithome
13786
Jul 2, 2021 ⋅ 24 min read

Creating a chat application with WebRTC

Jeremy Kithome Software developer. #MUFC to infinity and beyond! Fortune favors the bold. From tomato farmer to API farmer.

Recent posts:

Comparing Cms Options For Django: Wagtail Vs Django Cms

Wagtail vs. Django CMS: Comparing CMS options for Django

Selecting a CMS for Django can be challenging. Two popular options are Wagtail and Django CMS. Let’s explore their features, pros, and cons.

Chimezie Innocent
Jun 25, 2024 ⋅ 6 min read
Handling File Uploads In Next.js Using UploadThing

Handling file uploads in Next.js using UploadThing

Manage file uploads in your Next.js app using UploadThing, a file upload tool to be used in full-stack TypeScript applications.

Jude Miracle
Jun 21, 2024 ⋅ 15 min read
Exploring Advanced Support For Vite 5 In Storybook 8

Exploring advanced support for Vite 5 in Storybook 8

Explore the latest updates in Storybook 8, focusing on its improved support for Vite 5 as a build tool.

Will Soares
Jun 20, 2024 ⋅ 5 min read
Using Next Js With React Suspense To Create A Loading Component

Using Next.js with Suspense to create a loading component

Next.js 13 introduced some new features like support for Suspense, a React feature that lets you delay displaying a component until the children have finished loading.

Suraj Vishwakarma
Jun 19, 2024 ⋅ 9 min read
View all posts

18 Replies to "Creating a chat application with WebRTC"

  1. Hey !

    Thanks for that nice article !

    I got that project working well in localhost but a have troubles in production mode.

    I configured a domain name and certificate for the app to be abble to call getUserMedia, but i can’t deal with the websocket. I instantiate a secure Websocket with my cert credentials and https module, but i can’t reach it. Do you have a clue how to configure WSS with that websocket and apache2 ?

    Thank you !

    ps : there’s some missing code in The App component section

  2. What is the missing code? I cannot get this to work out of the box on get hub. Started signalling server, then started front-end server only to get error page “SyntaxError: Failed to construct ‘WebSocket’: The URL ‘undefined’ is invalid.” Chat.js: webSocket.current = new WebSocket (process.env.REACT_APP_WEBSOCKET_URL);

  3. Hey Matthew, change process.env.REACT_APP_WEBSOCKET_URL in chat.js file to the URL of your signalling server. The example code is hosted on Netlify and gets the URL of the signalling server from Netlify environment configs.

  4. Hey!

    I’m glad you liked the article.

    Unfortunately, I have not configured WSS with apache before. Do you have an error stack trace that could help identify what is preventing connection?

  5. Anyone else getting
    internal/modules/cjs/loader.js:491
    throw new ERR_PACKAGE_PATH_NOT_EXPORTED(basePath, mappingKey);
    ^

    Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath ‘./v4’ is not defined by “exports” in /Users/tom/pj/temp-signallingserver/node_modules/uuid/package.json

    after running node index.js in the signalling server setup?

  6. Sure, I think that may be a syntax issue. Instead of
    const uuidv4 = require(“uuid/v4”);
    as the tutorial notes, in the header can you write:
    const {v4: uuidv4 } = require(“uuid”);
    and see if this resolved it? Thanks

  7. exactyl @Bauerbaptiste i was wondering whether I wasn’t reading the title clearly. Had to go back to the top.
    I was lead here on searching for chat app with webRTC and all I am seeing is webSocket. Am I missing something or is the title misleading?

  8. Hey Wang. It seems that some code was left out. You need to add the following to your App.js file:
    “`
    import React, { useState, createContext } from “react”;
    import Container from “./Container”;

    const ConnectionContext = createContext({
    connection: null,
    updateConnection: () => {}
    });
    const ChannelContext = createContext({
    channel: null,
    updateChannel: () => {}
    });

    const App = () => {
    const [connection, setconnection] = useState(null);
    const [channel, setChannel] = useState(null);
    const updateConnection = conn => {
    setconnection(conn);
    };
    const updateChannel = chn => {
    setChannel(chn);
    };
    return (

    );
    };

    export const ConnectionConsumer = ConnectionContext.Consumer
    export const ChannelConsumer = ChannelContext.Consumer
    export default App;
    “`

    You can also refer to the code here: https://github.com/jkithome/simple-webrtc-chat-app/blob/master/src/App.js

  9. Thanks for writing this great tutorial.
    Can I have a hand please with the “uuid” code section.
    I have installed
    $ yarn add express uuid ws
    But then in the index.js file it tries to call
    const uuidv4 = require(“uuid/v4”);
    and fails.
    What am I missing??

  10. It works for me only being in the same network, for example, home WIFI, after building the application and hosting and using it from different networks, the webrtc channel does not open (readyState is not open), I assume that this is due to the incorrect operation of the STUN server, any ideas?

  11. Something seems to be broken here. My singaling server and client comes up properly, when hitting the URL localhost:3000 all i see is the reloading icon… on browser I am seeing below error

    WebSocket connection to ‘ws://localhost:9000/’ failed: WebSocket is closed before the connection is established.

    Seems the client is not able to connect to the signaling server… any help in this will be well appreciated.

Leave a Reply