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:

7 TUI Libraries For Creating Interactive Terminal Apps

7 TUI libraries for creating interactive terminal apps

When writing applications, a good user interface is just as important as the actual app’s functionality. A good user interface […]

Yashodhan Joshi
Jun 14, 2024 ⋅ 18 min read
Expo Router Adoption Guide Overview Examples And Alternatives

Expo Router adoption guide: Overview, examples, and alternatives

Expo Router provides an excellent file-based routing solution with crucial features such as deep linking and native support.

Marie Starck
Jun 13, 2024 ⋅ 8 min read
Superglue Vs. Hotwire For Modern Frontend Development

Superglue vs. Hotwire for modern frontend development

Explore how Superglue and Hotwire revolutionize frontend development with HTML over the wire, enhancing performance, flexibility, and ease of use.

Frank Joseph
Jun 12, 2024 ⋅ 7 min read
Using Pocketbase To Build A Full Stack Application

Using PocketBase to build a full-stack application

PocketBase is a performant Go-based tool that comes with essential features like user auth, file uploads, access control rules, and more.

Rahul Padalkar
Jun 11, 2024 ⋅ 18 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