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
source
Is we create uber like app with react js please help me for making me an uber like application..
Thanks sir
Интересно было)
Cool Stuff
awesome, thank you!
1:30 – 1:50 one of the best most relevant 20 second tutorial
Really cool! One question though, why use constructor and .bind instead of just using arrow functions? Arrow function methods save you 4 lines off the bat and 1 line for each additional method.
You really hate your keyboard don't you. Thanks for an amazing tutorial!
Really like your bash and vim settings. Is there any tutorial or git-repo for the configuration of vim and bash?
Does anyone know how to deploy this to heroku?
Every time I try to run the code at the same time you do in the video after a little bit of coding all I see is "Slack" on my HTML page. Anyone else have this issue?
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
also i used usercameonline however when i login first it doesn't record that…. how do i solve this problem
Nice tutorial! What keyboard did you use for thia tutorial?
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
was getting errors using the authenticate code
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);
})
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)
No working if statement (if (error.error_type === "services/chatkit/user_already_exists") ) everytime goes to else statement
What file do i open to start it lol
>curl -H "Content-Type:application/json" -X POST -d'{"username":"foo"}' http://localhost:3001/users doesnt establish connection. Cant see users field in the console when i type in a "username"
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.
Anyone facing this
index.js:2178 Could not parse the token. More information can be found at https://docs.pusher.com/errors/authentication/jwt/invalid. Error object: e {statusCode: 401, headers: {…}, info: {…}}
I like how you're using Vim on a Mac lol
When I click submit and check the Network tab,the Protocol and Response are empty and it says Pending and that never goes away.Can someone help me?? Thanks .
I know your using vim but how is your line number like 1 0 then 1 again
I like you're new Next App (p) 47:40
Thank you very much.
This is how to do a tutorial. Quickly and objective.
anyone know who the instructor is in this vid?
Chatkit is retired, what do i use?
no chatkit on pusher :'(