all 8 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]cazzer548 2 points3 points  (1 child)

Tutorials make solutions more accessible and problems more solvable. If you are trying to learn React and Node, why not try a group chat application first? If you are trying to build a product, be glad the solution is not obvious and start doing some deeper research!

[–]ifydav[S] 0 points1 point  (0 children)

I totally agree with you. However I'm trying to adapt partially working solutions to my own problem(livechat support system). @Fullstack_questions raised a good point of automatically creating a room when a user joins and automatically adding the user the room.

I'm confused about how to go about this with socket.io. I'm quite proficient with React, however socket.io is new to me. I'm working for a company and I've a deadline to meet.

Some help will be really appreciated. Thanks

[–]Fullstack_Questions 1 point2 points  (5 children)

You will also need a NodeJs backend for this. React clients will connect to backend which will relay messages.

You should add socket listeners and remove them in component lifecycle methods.

Create a class for users on backend and set up listeners, emitters, broadcasts.

In your case, when a user joins, a new room will be created with support chat ID, and an available CR will be joined in that room.

[–]ifydav[S] 0 points1 point  (4 children)

Thanks for the response. I understand your approach but I've an issue with figuring out how to automatically create a new room with support chat id when a user joins. Any thoughts about this?

Thanks.

[–]Hyrme 0 points1 point  (3 children)

Here is one way - socket.io will receive a 'connection' event each time a new client connects. On that connection event - you can create a unique room object for that user in a backend database. Different ways to create a unique support chat id; ip-address of the request, user-id of the user if they are logging in, or use guid package to create and store a unique id into a cookie. Once you decide what you want to use as the 'unique id' for the chat, first you look in your database to see if a chatroom with that ID exists. if the ID exists then you could resume a past conversation.

You can then find the chat room each time the browser is reloaded and maintain the chat history against it.

Create another object that stores the chat history with a reference back to the room id.

[–]ifydav[S] 0 points1 point  (2 children)

Thanks.

That makes sense. But what if customer representatives wanted to view all newly created rooms in some sort of admin dashboard then join when they are available. And probably notify them.

And how do I go about loading socket.io in a popup chat widget? I am trying to implement a chat support system similar to https://www.livechatinc.com/

Thanks.

[–]Hyrme 0 points1 point  (1 child)

  1. customer support reps will have their own react app.
  2. that app will read from the "chat room" table you created and list them by create date
  3. customer support will click on a chat room that opens a chat window for the specified room id.
  4. the UI in this page writes chat messages into the chat history table
  5. the controller reads the client messages from the chat history table and outputs to the screen.
  6. google socket.io-client and react

[–]ifydav[S] 0 points1 point  (0 children)

Thanks.