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:

Actix Web Adoption Guide: Overview, Examples, And Alternatives

Actix Web adoption guide: Overview, examples, and alternatives

Actix Web is definitely a compelling option to consider, whether you are starting a new project or considering a framework switch.

Eze Sunday
Mar 18, 2024 â‹… 8 min read
Getting Started With NativeWind: Tailwind For React Native

Getting started with NativeWind: Tailwind for React Native

Explore the integration of Tailwind CSS with React Native through NativeWind for responsive mobile design.

Chinwike Maduabuchi
Mar 15, 2024 â‹… 11 min read
Developing A Cross Platform Tv App With React Native

Developing a cross-platform TV app with React Native

The react-tv-space-navigation library offers a comprehensive solution for developing a cross-platform TV app with React Native.

Emmanuel Odioko
Mar 14, 2024 â‹… 10 min read
Essential Tools For Implementing React Panel Layouts

Essential tools for implementing React panel layouts

Explore some of the best tools in the React ecosystem for creating dynamic panel layouts, including react-resizable-layout and react-resizable-panels.

David Omotayo
Mar 13, 2024 â‹… 8 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