D4mations.com

Build a chat application like Slack – React / JavaScript Tutorial



Learn how to build a complete chat application with typing indicators, “who’s online list”, and message history in this React / JavaScript tutorial.

In this screencast, you’ll learn how to build a team communication chat application similar to Slack using React on the front-end and Chatkit on the back-end. Sign up here: https://pusher.com/chatkit

▼ Follow Booker ▼

on Twitter: https://twitter.com/bookercodes
on GitHub: https://github.com/bookercodes

▼ Links (in the order they’re mentioned)▼

Starter template: https://github.com/bookercodes/react-slack-clone-starter-template
Complete code: https://github.com/pusher/build-a-slack-clone-with-react-and-pusher-chatkit
Step by step written tutorial: https://github.com/pusher/build-a-slack-clone-with-react-and-pusher-chatkit
Chatkit Slack group: https://feedback-beta.pusher.com/

—

Learn to code for free and get a developer job: https://www.freecodecamp.com

Read hundreds of articles on programming: https://medium.freecodecamp.com

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

Original source

d4mer

, , , , , , , , ,

27 responses to “Build a chat application like Slack – React / JavaScript Tutorial”

  6. Seriously slow down! I thought FCC was geared towards beginners? Why is the instructor rushing through the tutorials? And the aggressive typing noise in the background really does not help either. Perhaps creating more quality tutorials would help to attract more developers to this video. Sloppy job.

  10. const chatManager= new Chatkit.ChatManager({
    instanceLocator:"v1:us1:xyz",
    userId:"HK",
    tokenProvider:new Chatkit.TokenProvider({
    url:"http://localhost:8081/authenticate"
    })
    });
    chatManager.connect().then((currentUser)=>{
    console.log("current User",currentUser)})
    .catch((error)=>{
    console.error(error)})

    while running the above code from the client

    to the node/express server:-
    app.post("/authenticate",(req,res)=>{
    const {grant_type}=req.body;
    res.json(chatkit.authenticate({grant_type,userId:req.query.user_id}));
    });

    throws an error:-

    Logger.ERROR: error establishing presence subscription:
    Could not parse the token. More information can be found at https://docs.pusher.com/errors/authentication/jwt/invalid. Error object:
    {…}
    headers: Object { "Request-Method": "SUBSCRIBE" }
    info: {…}
    error: "authentication/jwt/invalid"
    error_description: "Could not parse the token"
    error_uri: "https://docs.pusher.com/errors/authentication/jwt/invalid"
    proto: Object { … }
    statusCode: 401
    proto: Object { … }

    Can someone help me out fixing the error.
    Note:- I provided the correct "instanceLocator" in my application (not the one mentioned above)

  11. needed to use the following authenticate code: app.post('/authenticate', (req, res) => {
    const { grant_type } = req.body
    console.log(req.query.user_id)
    console.log(grant_type)
    let token = chatkit.authenticate({grant_type, userId: req.query.user_id});
    console.log(token);
    res.status(token.status)
    .send(token.body);

    })

  13. I figured out the problem n fixed it… I added couple more features to it… I made it possible to change chat room for more flexible convo…i do want to add personal conversation feature… I'm not sure how to do it though if you can help i would appreciate

  16. I m having a couple of problems here…first when I tie then to chatManage.connect to get currentRoom i get undefined so i had to attach then to currentUser.subscribetoroom…..i get all the user list that way however i cant seem to get user presence…. how do I send user state…. also when

Leave a Reply