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:

Using CRDTs To Build Collaborative Rust Web Applications

Using CRDTs to build collaborative Rust web applications

CRDTs, or conflict-free replicated data types, is a concept that underlies applications facing the issue of data replication across a […]

Mario Zupan
Feb 23, 2024 ⋅ 15 min read
Guide to Using TensorFlow in Rust

Guide to using TensorFlow in Rust

We explore the fusion of TensorFlow and Rust, delving into how we can integrate these two technologies to build and train a neural network.

Rosario De Chiara
Feb 22, 2024 ⋅ 8 min read
Using Signaldb With React

Using SignalDB with React: A complete guide

SignalDB enables automatic data synchronization between your components and a local in-memory or persistent database.

Antonello Zanini
Feb 20, 2024 ⋅ 6 min read
Guide To Next Js Layouts And Nested Layouts

A guide to Next.js layouts and nested layouts

Understanding how layouts, nested layouts, and custom layouts work in Next.js is crucial for building complex, user-friendly projects.

Ibadehin Mojeed
Feb 19, 2024 ⋅ 12 min read
View all posts

17 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?

Leave a Reply