How to build serverless p2p chat application in React? - reactjs

I would make a chat app where server communication is allowed only for signaling.
I checked this video: https://www.youtube.com/watch?v=WmR9IMUD_CY
This video goes about "real time" communication, for me some delay is ok. I would make chat application which only send text, but not video content. The question raised for me:
How to generate ice candidates to get list ip addresses / ports? How to make request to stun server?
If we have the ip and port list shared through the signaling server on both side, then how one client call the other client and send or receive text? Can I use axios for sending, and set one of the ip - port pair from the list as url? How to receive message?
Maybe I do not even need webrtc as the data transmission does not need to be realtime, some delay is ok?
Would you show a basic demo?

Maybe that is what you are looking for Google Code Lab Friendly Chat
but if you want to learn more about WebRTc I really recommend this article so you will can see if is that what you want.

Related

Is it possible to make work together Django Rest Framework, + Django Channels + Reactjs? if so..do I need Socket.io too on the client side?

I guess that the Title is quite explicit, but I will try to further explain my requirements so maybe anybody can help.
As explained Im building a site that uses DRF as backend and React in the client side, and i would like to have some real time functionalities, so I´ve been researching on the issue which took me to Channels as the way to manage asyncronous actions and websockets. The question is that the more I read the more I get confused... by the Channels documentation one might say that it has capabilities to work whether sincronous as asyncronous server..but then i do not want to miss my DRF classes that simplify my life so much... and the there is this other question coming to my mind regarding if then, i must also use socket.io in the front to connect with channels on the back.... so as you see... im quite confused...anybody could help?
I'm not sure about the client-side and socketio. but yes you can use Django channels and react to communicate on a WebSocket. you also be able to send a message on channels outside of consumers(API view). but it's kind of risky to retrieve data from WebSocket outside of the consumer. everything in consumers(channels) execute asynchronously so accessing received a message on WebSocket by API is not guaranteed.
1 - set up a Django-channels consumer and on connect add the channel to a group
2 - connect to the channel by react and communicate with the server and keep the channel open.
3- make APIs for events and send the event from API to the channel group.

Distinguish sender from receiver with Socket.io

I have built a web application using JavaScript stack (MongoDB, ExpressJS, AngularJS, NodeJS). The registration works, the authentication works, the chat is which is using Socket.io works but I need a way of distinguishing which client is sending and which client is receiving the message in order to perform further functions with the user's data.
P.S. Since this is a project that I can not publish there are no code snippets in my post, hopefully it is alright
The ultimate design will depend on what you are trying to achieve. Is is "a one-to-one chat" service or maybe a "one to many broadcast". Is the service anonymous? How do you want users find each other? How secure does it need to be?
As a starting point I would assign a unique identifier (UID) to each connection (client). This will allow the server to direct traffic by creating "conversation" pairings or perhaps a list of listeners (subscribers) and writers (publishers).
A connected user could then enter the UID of a second connected user and your service can post messages back and forth using the uid pairing.
conversation(user123,user0987)
user123 send to user0987
user0987 send to user123
or go bulletin board/chat room style:
create a "board" - just a destination that is a list of all text sent
user123 "joins" board "MiscTalk"
user0987 "joins board "MiscTalk"
each sends text to the server, server adds that text to the board and each client polls the board for changes.
Every Socket can send or recieve, your program must track "who" is connected on a socket and direct traffic between them.
I think a fine way to handle the clients is creating a Handler class, a Client object and create a clientList in the handler, this way is easier to distinguish the clients. Some months ago I built a simple open source one-to-one random chat using socket.io, and here are the handler and the client class.
I hope this example can help you.
1.) Create a global server variable and bind connections property to it and whenever the authentication is true ,store socket_id against the id(user_id etc) which you get after decoding your token.
global.server=http.createServer(app);
server.connections={};
If server.connection hasOwnProperty(id) then use socket emit to send your message ,
else store the socket_id against your id and then send your message.
In this way you just need to know the unique token of the target user to send the message.
2.) You can also use the concept of room
If authentication is true use
socket.room=id ; socket.join(id)
when sending message use client.in(id).emit("YOUR-EVENT-NAME",message)
Note: Make your own flow , this is just an overview of what I have implemented in the past.You should consider using Redis for storing socket_ids.

Silverlight notification from server to all clients without UDP

I wonder how can I achieve this without UDP, I have a solution using UDP multicast: http://blogs.msdn.com/b/ncl/archive/2009/11/18/udp-multicast-in-silverlight-4.aspx
but since this is for a high profile customer who has an intranet with port TCP 80 and TCP 8080 only enabled this solution is not possible. Yes, the application runs in an intranet environment.
I need a simple example how to send messages to all Silverlight clients over WCF.
I found this solution, but I have no idea how to implement that into Silverlight:
http://idunno.org/archive/2008/05/29/wcf-callbacks-a-beginners-guide.aspx
I'm out of ideas guys, please help.
Instead of receiving notifications async the Silverlight client should use polling instead.
It can poll a WCF service that will fetch the data from a db...
This is the typical solution. Anyway, you have to handle the case in which the Silverlight client wasn't online and then it becomes online and need to know its state...
However, if you still want Silverlight to receive async notifications try searching for 'Full Duplex'.
Here are some starting points:
http://blog.developers.ba/post/2009/02/25/Silverlight-chat-application-using-WCF-full-duplex.aspx
http://weblogs.asp.net/dwahlin/archive/2008/06/16/pushing-data-to-a-silverlight-client-with-wcf-duplex-service-part-i.aspx
http://hindams.wordpress.com/2010/04/05/wcf-full-duplex-with-a-silverlight-application/

Tic Tac Toe AppEngine Channel sample mechanics

Greetings gents,
EDIT: forgot the link to the sample, here it is: http://code.google.com/p/java-channel-tic-tac-toe/source/browse/trunk/src/com/google/appengine/demos/channeltactoe/
So i'm studying the channel API of AppEngine and i stumbled onto a question regarding the way it's architecturally coded. They way i perceive it works is the clients send standard POST requests, the game gets updated and the both players get the update through the ChannelService a JSON message.
Now i read on the javadoc that Channel is a two-way communication channel, so why did this developer go for the POST servlets(for game-updates) and Channel for distribution instead of using a single servlet for the sole creation of the Channel and then using that channel for front and back game updates communication between the client and server?
To summerize, what did does this architecture gain over using a true 2-way channel, or is it even possible to use the 2-way(back to server channel) in that way.
Thank you for reading, i hope my question is valid/understandable.
-Rohan
I don't know where you read that Channels are bi-directional; they're not. Channels are solely for sending messages from the server to the client. Client communications have to utilize standard HTTP requests.

How can I send messages to clients without polling?

Every example for GAE Chats uses some kind of polling. However, if my GAE app holds a list of clients (in the datastore if necessary), perhaps I could avoid polling by sending a message to all these clients. How can I achieve this?
If you are talking about HTTP, the short answer is that GAE does not currently support it. What I think you are asking about is sometimes called BOSH. Once WebSockets become more widespread, they will be an excellent solution for this problem.
In the mean time you might want to look at XMPP. Using XMPP you can avoid polling. Google has announced a Channel API (yet to be released) which will basically give you the same features as websockets.
You've probably seen some chat room examples...
Since you just want to send a message to users on your datastore (Tip: the IMProperty is great to store such data), it's just a matter of directly sending the message:
from google.appengine.api import xmpp
# `destination` is a list of JIDS
# `message` is a normal unicode string
xmpp.send_message(destination, message)
You can find a great tutorial on using XMPP by Nick Johnson here
Note that you can now use the App Engine Channel API for this: http://code.google.com/appengine/docs/python/channel/
You can create a channel for a given client using:
channel.create_channel(client_id)
Then when you want to update that client, send a message:
channel.send_message(client_id, message)
Basically each client will get a persistent connection that you can push messages over.

Resources