Implementing ajax to make a functioning live chat - javascript

I'm trying to build a simple live chat for my website, I already have everything set up, meaning databases, login and log out system, forms, displaying the database values in chat form.
The only thing I'm missing is implementing the live refresh function so users don't have to manually refresh the site to see new messages.
I'm a little lost, could you give me some guidance?
I'm guessing I have to add a specific javascript call whenever a message is sent, or the "send" button is pressed to be more specific, then that would call back a function to refresh the chat for every participant. Not sure where to start or which code to use.

Essentially, you have 2 ways to implement this.
Using a polling technique with ajax request which will grant you a greater compatibility, but you will have to much more work to implement it. I don't really consider it for most cases nowadays, because it could be very inefficient.
Using a socket mechanism, you can use web sockets for a out of the box solution, most browsers have support for it nowadays For third party libraries you can use socket.io which can fall back to web socket yet it grants a little bit for features out of the box, like channels, which you would benefit from. Lastly, for a third party service, you can use firebase/firestore which they have a realtime database, so whenever a change happens, you get notified.
I would recommend using either the web socket approach (native) or using a wrapper/library like socket.io. If you go with Socket.io, there are a lot of tutorials out there that build chats with that library, so you can get a working sample really fast.

Related

AJAX - How can I build a notification system, that is constantly getting updated, without slowing down my website too much?

I am a beginner to web development, and I am trying to do a notification system with AJAX and jQuery.
In my web application, I have a comment system where you can mention another user. After a comment mentioning a certain user has been written, a new entry on my notifications table will be added, containing the comment, the id of the user who commented and the id of the user(s) who will receive the comment. After the notification is stored in the database, I want the person that was mentioned to receive the notification.
To that effect, I decided to use AJAX. Using the setTimeout() method, I am sending an AJAX request to the database every 2 seconds, and with that, I can display the notifications visually to the user that is meant to receive them.
My only concern is that this will slow down the site once I connect it with a server.
So, I was looking for a way that would allow me to implement a notifications system without slowing the site too much, since the one that I am using currently doesn't seem very efficient.
I would appreciate any help.

AngularJS and MySQL real-time communication

I have built a web application using AngularJS (front-end) and PHP/MySQL (back-end).
I was wondering if there is a way to "watch" the MySQL database (without Node.js), so if one user adds some data to it, the changes are synced to other users too.
E.g. I know Firebase does that, but it's object oriented database and I am unable to do the advanced queries there like I do with SQL.
I was thinking to use $interval and $http and do ajax requests, so that way I could detect changes in the database. Well, that's possible, but it'll then do thousands of http requests to the server everyday and plus interpret php on each request.
I believe nothing is impossible, I just need an idea to do this, which I don't have, so that's why I am asking for a help here.
If you want a form of "real-time communication" you'll likely have to incorporate some form of long-polling from the client. Unless you use web sockets, but that's a big post about a bunch of different things. You're right to be concerned about bandwidth and demand on the DB though. So here's my suggestion:
If you don't have experience with web sockets then log your events in a separate table/view and use the pub/sub method to subscribe entities to an event, and broadcast that event to the table. Then long-poll against the watcher view to see when changes may have occurred. If one did occur then you query for the exact value.
Another option would be to use some query system with "deciders" that hold messages. Take a look at Amazon's SQS platform for a better explanation of how this could work. Basically you have a queue that holds messages and a decider chooses where to store the message using some hash or sorting method (to reduce run time). When the client requests an update, the decider finds any messages that would apply based on the hash/sort and returns them. Then you just have to decide how and when to destruct the messages.
The second option would require a lot more tinkering though, so it's really about your preference. I think what you'll find the difficulty to be is that most solutions have to deal with the fact that the message has to be delivered 1 or More times and you'll need to track when someone received the message and if it can now be deleted from the queue/event table or if you still need to wait. Otherwise you'll consume a lot of memory.

How to pull new post and comments

I am currently developing a website where many users post topics and the associated topics' comments are shown in the page. Currently I'm developing using cake php.
The very first time a user clicks the website, all the topics and comments are displayed. But when other users add new topic or comment to a topic, I need to show the update in the same page. I am confused as in how am I able to retrieve new contents and update accordingly in a page. For instance how facebook does it where when your friends adds status or comments on your status, it updates without refreshing the page.
I know that AJAX technology is used but how is it done. Any source that I can refer? Hope someone can help as I have been doing research for the past one week but no answers so far.
You can go two routes in this.
Server Push
http://en.wikipedia.org/wiki/Push_technology
This technique is perhaps the most efficient as the server notifies the client of any updates. However this technique usually requires a bit more work than a simple polling system. You can use something like nodejs or Comet to push updates. If you're using nodejs, I highly recommend using SocketIO to handle the client side. With Socket.io you can have the client side listening to the server on a channel so that the server can notify the client whenever an update happens.
Client polls server
In this version, the client (new visitors browser) constantly polls the server for updates. You can set whatever gap you want, but keep in mind that if you make the polling gap too small your server might take a performance hit as each new user will create many requests. This method is as simple as setting up a setInterval() call in JS coupled with an AJAX call.

See and talk to your currently online users on your site in a Ruby on Rails 3 application

I have a Ruby on Rails 3 application, and I want to be able to see a list of who is currently online. For example user1, IP address, and country. I then want to be able to open a chat / push messages to this user until they leave my site.
How can I accurately monitor who is currently on the site and instantly remove the user from the list when they leave?
I then can talk to them via faye pub/sub.
How can I accurately monitor who is currently on the site and instantly remove from list when they leave?
Well using HTTP you can not do this "instantly" in a browser. Almost all solutions I see use a heartbeat technique. Every X seconds, a request is sent from the browser (using Ajax), that tells if the user is online. If you haven't heard from the user in x heartbeats, you regard the user as disconnected - even Facebook uses this, it seems. I will recommend you to drop your requirement for instant, unless it's really important.
Another approach is to implement Flash or Silverlight, to make a socket connection to the server. But the demand on the server is high, and if many people is on your site, you will run into trouble with ports and so on.
I think this is not so much related with Ruby on Rails... but this is very hard to implement in HTTP with a scripting language only. The server does not know whether a user has closed the browser or not. The server just sends the requested page data to the user and closes the connection.
You would rather have to integrate Ajax or Flash to make things easier. I have seen some people developing chat programs with Flash, and it seems to work much better than any other Ajax-implemented chat programs.
Chat is very unfavorable in a web browsing context, since the page will be reloaded as the user clicks a link. If you are thinking about building an application that only supports a chat feature, you probably want to look something other than Ruby on Rails. For example, Node.js will be a good one.

Implementing web chat, how do I get typing status?

Can someone illustrate how I can get typing status of the other party with JavaScript?
UPDATE
Can someone recommend a one-to-one open source chatting application, preferably written in PHP? I only found open source chatting rooms which are for chatting among all onliners, but I just need a one-to-one chatting.
Here are a list of PHP-based open-source instant messaging software.
Some of those might be relevant for you.
For example, if you had an text area #chat then you could use this code to attach the event:
document.getElementById('chat').addEventListener('keydown', FUNCTION HERE, false);
See http streaming and some ready solutions here: http://ajaxpatterns.org/HTTP_Streaming
this is how google talk does it. And there are ready php or c++ solutions
It was quie a discovery for me!
This is an update to reflect the significant change in the OP's question:
Google Chat and Facebook both use XMPP(jabber) servers, as do most companies I know of that have internal instant messaging.
The nice part about XMPP is that you get all of the "is typing" and other presence-based information without having to roll-your-own in javascript (bear in mind, you will still need to use javascript to pass XMPP requests back to the server, but XMPP has most of the features you'd need already built in).
Check out OpenFire. It's a great XMPP server, totally open source, and they have a web-based version of their Spark client that is pretty nice.
Or you could get a PHP library for XMPP (there are a few). But you'd still need to have the XMPP server running in the background for PHP to work with.
Here's a list of XMPP libraries for PHP from XMPP.org:
Eiffel
JAXL
Lightr
Missus
xmpphp
Or, if you want to keep things mostly browser-side, they also have a list of libraries for javascript:
dojox.xmpp
js.io
JSJaC
strophe.js
xmpp4gwt
xmpp4js
I made a small chat application a while ago, and the only way to do it is to frequently check for new entries in the chat database and fetch anything newer than the last displayed message. At the same time as all that, you can check to see if the user's input is empty. If it is, do nothing. If it isn't, enter a status code into the database beside that user's name. If anyone has that status in the database when you're fetching information about new messages and who is online, you should display the 'user is typing' message. I hope that makes sense...let me know if it isn't.
For User1: If you save the chat message on each key-press to the database, with a status: sent=false and update the last updated date.
For User2: you could pole periodically for the presence of a message where sent=false and use the last updated to update user is typing message. if the lastupdated date is more than a say ten seconds you could remove the message as that person may have stopped typing. This will allow User2 to see User1 typing, stopping and continueing again.
Ideally polling for this information will be part of an existing call to the database to reduce additional overhead.

Categories

Resources