We Keep Coding

A question about how web applications work and how server-client is implemented

This is kind of a weird question I think to ask, but I have browsing about for the past some time and cannot find a clear definite answer.
I understand that a client connects to its own server and communicates with the web-server through sockets and I kind of see how that works in php (I have never used php but have used sockets before so I understand the concept).
The issue is I'm trying to get a real view of this.
The question is, do websites generally use sockets and contact a web-server to fetch data or the actual html? Or is it a rare choice made in some areas?
If it is generally used, then is the "real" js usually in the server? or is it client-side (for performance sake)?
Context:
Let me explain a bit where I'm coming from, I'm not a web expert, but I am a computer engineering student so most concepts are easy to understand. A "real"-er view of this would be very helpful.
Now, onto why I'm asking this. I'm developing a web-app as part of a project and have done a fair bit of progress on it but everything was done on a local dev server (so basically a client?)
I've started wondering about this because I wanted to use a database for my website and since I want to connect to something, I will need to connect to a web-server first (for security sake).
My question's intent is to guide me on how and most importantly, where, to setup this server.
I don't think showing any code would be of help here, but assume I have my client running on localhost:1234, my database on localhost:3306, I think I should have a web-server on another port so I can establish this communication, but I want to do it in a clean and legitimate way so all of my current solutions can be ported online with little to no changes (except the obvious)

There's a bunch to unpack here.
First of all, servers can be distant or local. Usually they are distant, local server are mostly used for development purposes.
Even if your server is on your local machine, it still isn't the client. The client is the part that is connecting to your server. For web development it is usually the user browser.
Javascript is a language that can be used server-side, with a NodeJS server, but more often client-side, in your user browser.
Your website, or web application, communicate with your server through various means. Most common one is the HTTP protocol, used to make server requests such as data request to populate your page (in case of an API server, REST or otherwise), or simply request the actual page to display in the browser. The HTTP protocol works by resolving URLs, and making requests to your server registered to this url using special methods such as GET, POST, DELETE, etc...
Sockets are used to create a persistent connection with your server that works both ways. It is mostly used for realtime updates, such as a live chat, as it allows you to push updates from the server instead of having the client request everything.
In most cases the database can be found on the same server as the one serving the website or application, as it is a lot easier to handle, and often faster without the extra networks requests to get the data. However it can be placed on another server, with it's own API to get the data (not necessarily web related)
Ports such as 1234 or 3306 are often used for local development, however once your move your project to a host service, this is usually replace by urls. And the host service will provide you with a config to access the associated database. Or if you are building your own server you might still use ports. It is heavily dependent on your server config.
Hope this clear some things up.

In addition to #Morphyish answer, in the simplest case, a web browser (the client) requests an URL from a server. The URL contains the domain name of the server and some parameters. The server responds with HTML code. The browser interprets the code and renders the webpage.
The browser and the server communicates using HTTP protocol. HTTP is stateless and closes the connection after each request.
The server can respond with static HTML, e.g. by serving a static HTML file. Or, by serving dynamic HTML. Serving dynamic HTML requires some kind of server language (e.g. nodejs, PHP, python) that essentially concatenates strings to build the HTML code. Usually, the HTML is created by filling templates with data from the database (e.g. MySQL, Postgres).
There are countless languages, frameworks, libraries that help to achieve this.
In addition to HTML, the server can also serve javascript that is interpreted in the browser and adds dynamics to the webpage. However, there could be 2 types of javascript that should not be mixed. NodeJS runs on the server and formats the server response, client javascript runs on the browser. Remember, client and server are completely isolated and can communicate only through an HTTP connection.
That said, there ways to make persistent connections between client and server with WebSockets, and add all kinds of exotic solutions. The core principle remains the same.
It does not matter if server software (e.g apache, nginx) is running on your local machine or anywhere else. The browser makes a request to an address, the DNS and network stack figures out how to reach the server and makes it work.

Connecting to PHP using Apache's mod_proxy_wstunnel without using 3rd Party APIs

I am new to WebSocket world and even after a week, I still could not find how to use it with PHP without using any 3rd Party Library. Or not sure if it is even possible.
I have 3 questions,
1) Do we must need to use some 3rd Party APIs or Libraries like Ratchet, PHP-Push-WebSocket or PHP WebSocket to enable PHP to communicate over WebSocket protocol?
2) If your answer to above question is yes then what is the advantage/purpose of using Apache's mod_proxy_wstunnel?
3) If I use any PHP WebSocket 3rd Party Library, then do I still need to enable and use Apache's mod_proxy_wstunnel? If No, then again what is the purpose of Apache's mod_proxy_wstunnel?
I went through this Using go-websocket behind Apache mod_proxy_wstunnel. In this question, the OP has indicated some go-websocket but unfortunately the link is giving 404 Error and hence I cannot understand if the user has used any 3rd Party API.
Any help would be highly appreciated. Thanks in advance.

PHP is not created for WS. Of course you can do this, but it is full of while (true) and fsock_open [*]. And you have to have access to the shell to run the WS-server with php-cgi. (usually)
Choose a language that supports threads / asynchronous communication. Now on the top is Node.js. In addition, better use dedicated libraries to support older browsers, etc. If you are thinking about alternatives to ajax then you can use socket.io. If you want to create one-to-all communication (eg chat, broadcast messaging), go one step further and use one of the Bayeux implementations, for example: Faye.
The mod_proxy_wstunnel extension adds an extra layer to the WS server. Depending on the configuration, it can support DDoS, queue, load-balancing, local port swapping, and https support. But better use this for nginx.
So, for test you don't need mod_proxy_wstunnel, and on production, you should add an extra layer of security, eg NGINX ws tunelling.
[*] Sorry, I made some mistakes. PHP has native support for WebSockets. That content is going to set you negatively to WS in PHP.
Websockets are events, and PHP is poorly managed with it.

Just to elaborate a bit on why Apache + PHP is unsuitable for WebSocket support...
1) Do we need to use some 3rd Party APIs or Libraries like Ratchet, PHP-Push-WebSocket or PHP WebSocket to enable PHP to communicate over WebSocket protocol?
No, you can just open a local socket and accept requests using low-level Socket API (example), or you can even upgrade an existing request to WebSocket. But there is a problem - read on...
2) If your answer to above question is yes then what is the advantage/purpose of using Apache's mod_proxy_wstunnel?
The advantage of mod_proxy_wstunnel is that it allows users to establish WebSocket connections with your server using the server's HTTP(S) port (usually 80 or 443) instead of connecting on a custom port (e.g. 9000). This does not eliminate step 1 though, as it simply proxies WebSocket connections from Apache to the custom port.
3) If I use any PHP WebSocket 3rd Party Library, then do I still need to enable and use Apache's mod_proxy_wstunnel?
The problem with Apache / PHP setup is that PHP code always runs in scope of a specific HTTP request. This is a problem because Apache is not designed for long-running requests. Apache can support a very small amount of active requests (usually 150 or so), which is barely enough to handle regular (short-lived) traffic on an medium-size site. In addition, by default max_execution_time is set to 5 minutes, which means any request (and any WebSocket connection inside of it) will be killed after that.
If No, then again what is the purpose of Apache's mod_proxy_wstunnel?
mod_proxy_wstunnel handles persistent connections without tying up a request thread. So it allows one Apache instance to handle hundreds of thousands of WebSocket connections. But again, it's just a tunnel, it can't "invoke" PHP, as it can only proxy a WebSocket connection to some other application.
If you have access to the server machine, you can run a standalone PHP script, which would handle WebSocket connections as a daemon outside Apache (e.g. via systemd), and optionally use mod_proxy_wstunnel to proxy requests to it.
But by itself, Apache + PHP architecture is unsuitable for production-grade WebSocket support.

How to interact with Node JS from client side

I am building a web portal to interact with internal databases and potentially run ssh commands. I chose NodeJS with Express for this purpose.
Light weight server-side interactions such as templating or routing I managed with Node and Express but I am looking for ways to do heavy tasks such as DB work (insert/update/delete) or run node code with the click of a button from client-side.
My research brought a couple of ideas however I want to use the one which is future-proof, secure (but not vulnerable to security configurations) and scaleable. Please share your thoughts and guidance on the matter?
Socket IO (may not be scaleable)
REST API
AJAX (Has issues with AJAX and CORS in the past)
Other approaches????
Thanks

For what you are trying to accomplish, you should be looking into the MEAN stack. I would recommend that you use Angular4, Loopback (Built on top of Express), MySQL, and of course Node. It is very easy to make an angular sdk that will allow you to use the same loopback models that your server side will be using. As a result you will be able to do your heavy tasks such as DB work :)

direct client-to-client message

I have been working with node.js for a while, now when I'm looking deeper into it, for a chat aplication instead of sending message as client - server - client, there must be some possible ways for direct client to client message sending?

Browsers tend to communicate with servers via HTTP. Some implement other protocols, like websockets & SPDY, but again, these are mostly client-server protocols.
Some plug-ins (like Flash & Java) can open ports and communicate client-client. (AFAIK, haven't actually used them.)
Chrome is the only browser I'm aware of that can (soon) open TCP and UDP sockets from Javascript and do direct client-client communication. At the moment normal web apps can't do this, your app needs to be run as a "Chrome Packaged App", with a special manifest file.
Here are the docs, a blog post describing the feature and a browserify module that can behave like the net node.js module in the browser.
EDIT: This should probably not be tagged as [node.js] since you're trying to run in browsers (not in your node vm), this is a Javascript / Browser question.

This is maybe out of date question, but take a look on PeerJS.
It requires server only as a connection manager (broker). But all communication is done between clients directly.

This does not have anything with server. If you need something like that and if clients are flash you can use RTMFP . For JS i google this library which is js bridge for RTMFP, I dont know how it works. At the end you can write you own library to chat beetween clients but this is much harder(IP addresses are behind NAT, etc...)

I think answer for your question is here
PS Also exist open-source in-browser server which written using JS, but I didn't google it quickly. If you find it, please notify me.

If you just don't want to write your own server you can use:
https://httprelay.io
Use AJAX calls to communicate between peers.

Kerberos via javascript or HTML 5

I have been tasked with setting up a server which uses a web based control interface using kerberos and active directory for authentication. I am using twisted.web as the web server. The issue is that I do not want user passwords coming through this server, but I don't know if it is possible for firefox and chrome to get access keys from the kerberos key server. Specifically it must work with firefox, other browsers would be a bonus. Is there a javascript library, possibly using HTML5 or a firefox plugin that allows for authentication to an untrusted server using kerberos? A flash application might also be possible.

Maybe you could through a reverse proxy in front of twisted and use http auth from the web app and delegate authentication itself to Kerberos via an apache or nginx module.
While the proxy will receive the password, the twisted server won't, in line with your use case. Requests would be intercepted by the proxy and delegated to your back end (proxy_pass) following a successful authentication.
This way your solution would work independently from any http client/web browser.