ionic chat application using socket.io(how to make my user to join chat.socket.io) - angularjs

I am trying to do chat application using socket.io.
i have refereed this tutorila
https://www.sitepoint.com/using-socket-io-and-cordova-to-create-a-real-time-chat-app/
i am not able to get connected to the common server look here http://chat.socket.io/
i would like to create an app where all the user enter the name and connect the chat.socket.io group. what is the server host they are using how can i connect my app users to join the chat.socket.io.
problem is i am not able to connect my users to http://chat.socket.io/
UPDATE:
Lets say an example:
In my app i am having number of users and i have button called chat
when the user clicked the chat button he should enter this page http://chat.socket.io/ and i need a exit button to exit the chat
To connect with server we need some thing like this "http://54.200.176.147:8888/socket.io/socket.io.js" is there any
port available for chat.socket.io please let me know

I would rather suggest you to setup your own server than trying to connect to http://chat.socket.io You can setup your own server using nodejs and express and listen & broadcast chat messages.
Suggest you to check out this socket io chat link for setting up the server and trying out basic chat. You can also download the server setup from my github page and follow the chat link instruction to run the same which listens on port 3000. Hope it helps

Related

Service worker: check if server(api) is reachable

I was following this tutorial( https://www.geeksforgeeks.org/service-worker-how-to-create-custom-offline-page/ ) for creating a offline page using a service worker in my react app. This works as intended (when no internet connection) but I was curious how can I check if my API endpoint for status is online/reachable because in order to be accessed I need to use a VPN and I want to display the offline page when I'm not connected to the VPN.
Use navigator.onLine
eg.
console.log(`Online = ${navigator.onLine}`);

How to build serverless p2p chat application in React?

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.

If Websocket does a lot of works, should i create another WebSocket?

If Websocket does a lot of works, should i create another WebSocket?
I'm using Websocket in my react application. To simply explain about my app, when user enters classroom page, then make object of Websocket and update socket information in reducer.
When WebSocket connected, teachers can connect to student's computer so they have access of remote control and they can chat each others. I have question here, i believe that the Websocket has too many functions to do, so i tried to make another Websocket for chatting function. Therefore, one socket is for remote control and the other is for chat.
Is it right way to make another Websocket in reducer? Or is there any other suggestions?

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.

how to send email directly in React Native App

I am progromming about function: send Email to gmail Address directly from React native App.
I searched on Internet and try library: https://github.com/anarchicknight/react-native-communications, https://github.com/chirag04/react-native-mail.
Howerver, they only show me view of Gmail App which I installed in my device.
I want react native app will send directly to Address Email.
My device I tested run on Android Platform.
Thank you so much
You need an email server or an email services to send an email, there is no way you can send an email directly from the client side.
There are several of them in the internet, you can try: MailGun or SendPulse, they got some good free tiers.
Your job is just calling a simple POST method from your app to their APIs.
I have tried, and so far succeeded in testing with iOS, with react-native-email ("npm install react-native-email").
There is a bit of fluffing around when sending the first email as you have to "login" to your email account. But otherwise, test emails are going through fine.
Also, SendPulse is a bulk newsletter service, not for individual emails.
One annoying caveat: it won't work in your emulator. It will return a URL error when you click the send button. But it works fine on a real device. I'm using Expo (and who wouldn't) and it works fine on my iPhone.
Complete code for testing purposes here: https://github.com/tiaanduplessis/react-native-email

Resources