This site does specifically what i want to do http://en.lichess.org/. Users join the chess game and after some seconds the lobby refreshes and there are new games added. Does anybody know how can i do that ? or at least give me a starting point?
In the traditional method (and for older clients) you would do 'long-polling' which would fire every few seconds asking for updates. The new way is through web sockets. The page you reference uses websockets.
So if you have a modern browser, then you can use Websockets and the server can push data to the browser (same with EventStream). Then that message is read on the browser and the proper view is updated.
There are some frameworks which do this stuff for you, biggest one I can think of is Meteor
See the dev console:
Related
I have variable in Javascript which are created by reading a number from HTML, adding a number to it and then returning it to HTML.
I want to make it so that no matter what browser/what user you are, you are seeing the latest version of the variable. Currently, if I refresh the page then the number resets to 0 (the default value). I want it so that if I update the number to 1 when someone else views it from another browser they will also see 1 and not 0.
I've seen that cookies are an option, however I thought cookies were client side only? So that would mean that only I would see the latest version of the variable.
I've seen that sessions are another option, are sessions server side? And would they do the job that I am after?
Is there another way of doing this I haven't considered?
Thanks in advance
I want to make it so that no matter what browser/what user you are, you are seeing the latest version of the variable.
You need to send your updates from the browser to a server, and then have that server relay your updates to all the other clients. There are many choices for how to do this, with various tradeoffs and complexity.
One method is to simply take that number and send it to the server. Then, on next page load, the server injects that new number into the page it outputs (or it serves it up via an API call, over AJAX, via the Fetch API, or server-sent events, WebSocket, etc.). If you do this though, you will need to decide how to handle concurrency. What will happen if two people load the page at the same time?
The general system you're describing is called Operational Transform, and this is a rabbit hole you probably don't want to go down right now. Just understand that there's no magic that synchronizes things across the planet perfectly and at the same time. Your system has to account for inherent delays in some way.
I've seen that cookies are an option, however I thought cookies were client side only?
Yes, cookies are client-side. They're sent to the server with every request, but that's not a useful tool for you, aside from session identification.
I've seen that sessions are another option, are sessions server side?
They can be, but you need to find a way to know what the user is between browsers. Normally, a session ID is stored in cookies.
My client wants applications written in electron which works both offline and online. The application is to connect to the server / database and download data (photos and descriptions of products) so that it can work in the offline version. When it is online, the application checks whether there is any change on the server / database and then an update occurs.
I have already prepared such applications (search engine and product filters with the possibility of generating pdf), but I have no idea how the application would check whether the server existed any of the data and download new photos of products, etc.
Yeah well the question is: Do you want to run you're queries on the Client it self? Because then, if not strictly restricted, someone finds a way to open up the console and sends funny queries.
But anyway... your question:
The easiest way I can think of this, because we don't want to download everything again, is to have a version number for each element.
So the client has one and if that does not match the servers it gets updated. Now you just have to get all IDs. But keep in mid, you still have to handle what happens if an item gets removed or a new one added.
This is not really an answer but I hope it inspired you a little bit.
Oh some after thoughts:
You could get something like a WebSocket between those two. Yes you had to program one more service but
The query would be save
You could keep track of removed and added items
You could work out some timestamp system that you get all items that are newer than the timestamp of the client.. this will be some work though.
nice day, Elias
I am trying to create a social network with live chat system, so that users can have notification that they have a new message or receive a message after it was sent from another user in real time.
I am new to this, I have made front end (div that will hold messages that are fetched from DB, in form of a paragraph) and DB design, but I am not sure what to use for back end. My best solution so far is to make Ajax call for every user in every few seconds interval, but this looks like inefficient solution for many registered users.
I have searched the web and haven't found any good and up-to-date solutions and I would appreciate if someone could share some experience or point me in the right direction.
Few ways to do it:
websocket (with socketio it's the best)
Server Sent Event Long Pooling Pooling (Ajax)
The best now is websocket. But you can have some problems if your chat needs to work behind some firewall. But the overall perf if you use websocket, you will use something like 80% less resources.
According to this post https://code.google.com/p/chromium/issues/detail?id=429419 as well as some testing I did to verify the limit is real - I understand that number of WebSockets I can open is limited.
Problem is that I sometimes need more than 30 websockets, because a user might open 30 tabs.
I was wondering what would be the best possible way of maybe sharing a pool of webSockets between different tabs. Here are some ideas I had in mind, and I would love to hear other possible ideas:
Allocate a webSocket pool in one main window, as a globally reachable element and then make sure all other tabs are children of that main page. Then I can use an inter-tab communication:
window.parent...
Problem is that not all tabs are created as child windows of the main window, and that main window might be closed.
Allocate a webSocket pool somehow "in the local storage" - I am not too familiar with the local storage, but I think that at the very least it can hold somehow a reference to a master tab that is currently managing the webSockets. Every once in a while, other tabs try to set themselves as a master tab.
I know its sounds awful and cumbersome. But how possible is it to write a thread/proccess safe code when accessing the local storage? Any example will be appreciated.
Would love to hear any other suggestions you might have.
Number 2 won't work, because LocalStorage is limited to string types.
I would recommend looking at ServiceWorkers.
A single service worker can control many pages. Each time a page within your scope is loaded, the service worker is installed against that page and operates on it.
This sounds pretty close to what you want. Register a ServiceWorker that simply accepts messages and rebroadcasts them to clients - any page from your domain. So you can have one main page that creates the WebSocket connection, and every time it gets a push it will broadcast a message through the ServiceWorker messaging system. Other tabs can pick up on it as needed.
Alternatively, you could use a shared WebWorker on the same principle. Just install it as a messaging system that broadcasts the messages from your WebSocket.
These aren't exactly the intended uses for these technologies... but if it works it works.
I am building a website on a free website provider (000webhost) and I am currently working on a chat. I have set an interval every 500ms which reads a file and checks if a new message was posted. If there is a new one, i load all messages from a .txt-file into a element in html.
It is nearly finished but after long chatting or just being on the chat-page (3 minutes or more), my site crashes and I have to wait about an hour till i can access it. I am refreshing the chat using javascript and ajax every half second.
Does anybody know what I could have done wrong?
I already searched google for that issue but couldn't find any help.
Edit:
I changed the interval for refreshing the chat to 2,5 seconds and the website didn't crash. I think that solved the problem..
Sounds like the host is blocking you, maybe due to excessive requests. One request every 500 milliseconds from the same IP can probably be mistaken for a DOS-attack or similar.
There are more performant and suitable ways to build a chat - have a look at web sockets or node.js for instance.
NodeJS Chat
Web Socket chat
Update
As Tom points out in his comment, it might be that a free web host doesn't provide or allow you to setup a Node-server. In that case, I guess you could experiment with an increased request-interval, and see if that helps you, or check with the host if they have such a limit. An increased request interval would probably make the chat feel less responsive, but it is tough to get everything on a free host.