What is difference between WebSockets and Socket.io? - javascript

Scenario: I'm new to JavaScript (have experience C/C++/Java), and working on a React UI with NodeJS server wherein the server will get updates on the displayed data at specific intervals (say 5 secs). The server is supposed to push the data to React UI to update the displayed data quickly.
Contenders: I came across 2 JS libraries Websockets (is lib a right term for websocket?) and Socket.io to achieve this. To me they both appear same.
Did I Google?: Yes, but with my lack of knowledge of JS, I couldn't understand the difference.
Problem: What is the difference between these 2 libs (libs?) and how can I decide which one is more suitable here?

Scenario: I'm new to JavaScript (have experience C/C++/Java), and working on a React UI with NodeJS server wherein the server will get updates on the displayed data at specific intervals (say 5 secs). The server is supposed to push the data to React UI to update the displayed data asap.
This is how I would do it.
Contenders: I came across 2 JS libraries Websockets (is lib a right term for websocket?) and Socket.io to achieve this. To me they both appear same.
In short, I am aware of two different ways of communicating between the server and client: WEBSOCKET and SERVER-SENT EVENTS (SSE). They are slightly different so it would be highly advisable to Google both options to find out which would suit you better.
Socket.io is essentially a library to assist with the creation/management of websockets. Imagine it to be your .NET Framework when you could have written a system yourself in C instead.
Did I Google?: Yes, but with my lack of knowledge of JS, I couldn't understand the difference.
Here are some links that can help you:
SSE:
https://www.w3schools.com/html/html5_serversentevents.asp
https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events
WEBSOCKET
https://www.html5rocks.com/en/tutorials/websockets/basics/
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications
COMPARISON
https://www.google.com.au/search?safe=off&ei=MmNLWuGkLsHQ0AS87J_4Bw&q=websocket+vs+sse&oq=websocket+vs+sse
Problem: So can you please help me understand the difference between
these 2 libs (libs?) and help me decide which one is more suitable
here?
As I have mentioned before, you have technically only mentioned one package library (socket.io) which manages the websockets via their API. I would assume the other method would be to do it manually using the native JavaScript method. It is up to you which one you choose and you'll surely find that there are advantages and disadvantages with both.

Related

How to build a REST client frontend for a REST API backend?

I've built a REST API backend using Django and am now at the stage of designing a client facing frontend. Though, I can't seem to understand how this client frontend should be structured and which languages it should use.
PHP is server-side, and is usually used as the language for building backends. When coupled with a framework such as Codeigniter, it can also be used to play around with sessions, route URLs, and decide which templates to use. Though, I don't believe it can be used to call my REST API to fetch resources (might be wrong here, correct me please if I am).
Javascript is client facing but is used only once the webpage has been fetched from the server. AngularJS is great, but from what I've read, it seems it only helps add very dynamic functionality into already rendered static pages.
I am really open to any ideas, suggestions, and advice based on your experiences creating client frontends. So, back to my original question, how does one structure a REST client frontend, which language is best for this goal, and if which frameworks should one consider to use?
Update 1
Someone asked whether this client frontend will be run in a browser -- the answer is yes, it will. I am trying to build a Twitter-like web client frontend that interacts with a Twitter-like REST API backend. Basically, everything you see there when you go on Twitter's website.
Since it is a browser frontend I would go with HTML/JavaScript only. No need to use PHP or any server side language IMHO. This has the advantage of being extremely portable.
I would also use a JS framework for that purpose ( the trend nowadays seems to be angular).
REST really, really isn't new. It's been a part of HTTP at least as far back as HTTP 1.1
Have a look at this question: Backbone.js frontend with RESTful Rails backend? the top answer lists 20 possible frameworks for building a front end.
Thanks for your help, everyone. Found exactly what I was looking for here:
http://docs.python-requests.org/en/latest/
A nice little library for Python that allows me to basically make calls to a REST backend from within a Django application, which serves as my frontend.
AngularJS will also be used for to make the static pages that Django returns more dynamic. Why? Because AngularJS by itself can be the complete solution only if your whole site consists of one page. If you have multiple pages where each one has it's own set of dynamic elements, you need a combination of Django and AngularJS.
Apparently REST is still quite new and it seems there aren't many people that have stumbled upon this very fundamental question like I have.
Once again, thanks!

jQuery alternatives for multiplayer games?

First off, I am not asking for any code or anything like that.
all I need is some advise.
I'm creating a roulette game and everything in my roulette game is based on jQuery.
however, as we all know, jQuery is client side so I was thinking about using AJAX to send some details back to server and from the server to the users browser so I can make this roulette game work in "multiplayer" fashion... But the issue is that I don't think its possible to send the roulette's wheel animation to the server and back to users browser so I am a bit confused about this!
In my research I came across some information (old ones) about using node.js and jquery together! I don't know if this is possible or how easy it would be to use my jquery code in node.js as I have never used node.js before..
so the question that i have is:
based on the information i provided above and my requirements, what are my options?
can I use AJAX to achieve what i am trying to do and if so, a bit
information would be great.
if AJAX is out of question, is it possible to use my jquery code in
node.js to achieve what I am trying to do?
ANY ADVISE WOULD BE APPRECIATED.
P.S. I don't want to use HTML5 as 1st I don't know much about HTML5 and also, some devices, browsers do not support it.
Thanks
The best way is to use websockets to ensure real time communication. One of the best alternatives for implementing that could be using a server under node.js. Have a look to this video from Code School node.js tutorials: https://www.youtube.com/watch?v=mtDK4jf4RS0 where is ilustrated how to implement a real time chat. Your problem is based on the same.
There are three parts to a multiplayer game displayed in a browser:
client-side display,
server-side data management,
client-server communication.
If you're already set on your display technology (jQuery), then you're probably going to use $.ajax() for client-server communication. However, technologies used for server-side data management are completely up to you and they don't necessarily have any connection to the technologies used for display and communication (meaning the traditional communication initiated by client).
Basically, use any kind of server technology stack you like. Node.js might do just fine but there are many other viable alternatives. They just need to support communication with the client.
So, to be absolutely clear, your question doesn't really make sense. You might use jQuery in the client and Node.js on the server, but they will never really "work together". They will manage completely separate parts of your application and connect through protocols not specific to either of them.
As for the animation, the animation itself is solely a client-side problem. If you want to "synchronize the animation" across multiple clients, you can let the clients communicate with the server, but they only ever need to send/receive plain data. Then you adjust the client-side animation based on the received data.
As another poster points out, websockets are a better fit for this than regular client-initiated HTTP requests. Not because of "the animation", but because you want all the clients to receive the information about the start of betting at the same time.
I am also developing a MMO game using javascript only. Firstly, there are two different types of javascript here. Usual client side javascript (the one you already know) and the server side javascript (i.e. Node.js).
You will need to develop both client and server before connecting them with jQuery's Ajax. So you need to study Node.js before designing overall architecture of your game.
I read many Node.js tutorials and watched many youtube tutorial videos but I was still confused, before I really sat down and read a good textbook that explained from basics, one like below. Try to get hold of it from your local library.
Express web application development learn how to develop web applications with the Express framework from scratch by Hage Yaapa
Express is the popular framework that runs on Node.js now. So it's worth getting familiar with Express Framework. Once you understand how express app works (not so difficult), you will see how you can frame your game structure like I did :)
In order for many clients to share same animation, there must a server that synchronizes the game state. Ajax can only link between server-client communication in my understanding. There is no mechanism that connects between clients. The clients ask server what number was the result of roulette roll and show the corresponding animations.
Yes, you can use NodeJS and jQuery together.
NodeJS is server-side, meaning that you set up a server (a lot of people use the Express module, which is easy to use), which serves content to clients asking for it. Your server-side code can be in any language supporting sockets, not just NodeJS. But NodeJS is easy to use if you know JS already.
jQuery is client-side, meaning that it's executed by the user's browser, and may or may not have a server-side component (if it doesn't need it), or it might have one where it sends requests to the server-side code. When it requests a page from the server, it can be static content (like when you request index.html) or dynamic via an AJAX request. Client-side browser code must be HTML/CSS/JS (you can't make Firefox or Chrome interpret C, for example).

How to integrate Golang backend and Javascript (three.js) frontend?

I would like to write a 3D application using Golang, my favorite programming language. However, I would prefer not to use native OpenGL directly as the graphical frontend as this would entail a larger learning curve than I'm willing to tolerate. Additionally, I don't really want to use a Golang game engine like go:ngine.
After doing some research I found out about the amazing WebGL Javascript library three.js and I was so intrigued that I completed an introductory Javascript course in a few hours. I'm not really a web developer at all, so I'm wondering how practical it would be for me to write my application primarily in Go but with a three.js frontend.
Some specific questions:
Is it worthwhile / practical to use Javascript/three.js as a frontend to a Golang server like this?
If it is worthwhile, where can I look to learn how to integrate the two cleanly?
If it isn't really worthwhile, which alternatives do I have?
Thanks, any response appreciated.
Edit:
Do you plan to make operations on geometry in Go, possibly in realtime and communicate with your Javascript layer using Websockets?
Yes, this is what I'm thinking now. I'm intending my (Golang) program to generate streams of vertices and triangles based on a few parameters from the user. Each "structure" is generated all at once after the users supply their parameters (which I see as slider bars + input boxes on a Javascript frontend).
Here's an example of something the Go program might generate, plotted in GNUPlot:
(source: alexozer.com)
If this is the case you underestimate Javascript a bit. You should write most of your application in Javascript and use Go as a classical backend service layer like user accounts, persisting state, etc.
I'd be fine with doing that, except for these reasons:
The core generating process fundamentally depends on Goroutines and channels
I know close to nothing about web development, including frontend and backend
So I suppose I'm asking about the implementation details of one of these three possibilities:
Writing most of the program, including the generator, in JS, and a minimal backend in Go
Writing most of the program in Go and using JS just as a graphical frontend
Something else?
I recommend leaving out the whole Websocket aspect because it's only a possible optimization (and maybe not even that).
If you need to depend on Go's concurrency model then go for it, write your component in Go, then a Webserver in Go that takes parameters coming from an HTML request, uses them to compute the result and sends back the data in a JSON format.
On the frontend you will then only focus on sending this request when the user changed a parameter and for displaying of the JSON data you can use ThreeJS right away.
You'll still have to learn a bit of web development and Javascript though. But hey, they say the web is the future ;-)
I think it's the way to go for your case because your application operates in a quite strict request-result way.
The answer to your question depends a lot on where exactly you plan to draw the line between your Go component and the Javascript component. From the way you describe the problem I get the feeling that you want to write most of your application in Go and use JS only as a display layer? I wouldn't recommend doing that.
To rephrase my question: Do you plan to make operations on geometry in Go, possibly in realtime and communicate with your Javascript layer using Websockets? If this is the case you underestimate Javascript a bit. You should write most of your application in Javascript and use Go as a classical backend service layer like user accounts, persisting state, etc.
I might be able to give a more specific answer if I know what exactly you plan to do.

Multi user HTML5 Canvas sketching with JS

Anyone knows a good tutorial/js plugin to create a multi user html5 sketch web application?
Would be nice to have cross browser compatibility, preferably without any tools that need to be installed server side.
If the latter is not possible, I would also be happy if the application just saves the user x's sketch so that next time someone loads the app, it would show user x's sketch on startup.
Thanks for your advise.
PS. I have looked at Mr. Doob's, he uses node.js, unfortunately my hosting does not support this just yet. Hence I am asking for a solution that need no server side installation. Also the multi user drawing pad by Union Platform seems to fit the bill, but unfortunately it also requires something to be installed.
If you're willing to shift to a new web host for this application you can use Heroku. Heroku is free and supports Node.js.
I created a multi-user Agile project management whiteboard using WebSockets and Node.js and found a 624% increase in requests per second vs using HTTP. I use MongoDB on the back end which allows you to store data as serialized JSON... this means you can send JSON between client <-> Server <-> Database with no parsing (very fast).
Hope this helps!
The reason Mr. Doob's implementation uses Node.js is because node is great at this kind of things. Since this is going to involve delivering realtime changes to different users, your best bet is to use Comet/Ajax-Push/Longpolling. And if you want to support multi-window usage(multiple browser tabs having your sketchpad), you would need to implement http connection pooling to get around the connection limits set by browsers as per http standard.
If you can't use websockets which are fairly new anyways, Then I would suggest using ajax polling of some sort. Basically use ajax calls based on a delay.
This wikipedia article shows some of the various options you should do further reading into.
http://en.wikipedia.org/wiki/Comet_%28programming%29

Implementing COMET clientside

I have read up about what COMET streaming is, and all the various hacks required to get it working across the major browsers. The problems encountered seem to be two fold: 1. Server being able to support many persistent connections 2. Implementing the JS functionality
I have an application where I need to perform COMET streaming. I have already tackled the first problem above - I have a custom server running which delivers updates as it arrives in chunks. I want to now be able to connect using JS to this URL, so I can receive the updates.
Is there a simple COMET library I can use for this? I saw the Orbited project. Can I use the client side JS of orbited to perform this? What kind of modifications do I need to perform in the backend for this?
If you can get your server code to conform to the Bayeux specification then you can use any of the existing cometd javascript implementations, current available in DOJO and jQuery. Unfortunately, the spec is quite complex, especially if you want to do both long-polling and callback-polling. You may be better of just running an existing cometd server like Jetty and then writing a client library for your server code to push data to it.

Categories

Resources