How to run socket.io (client side only) on apache server - javascript

I want to run client side of socket.io on my apache server.
I have uploaded the socket.io directory to my web server and tried the simple client connection example from the main site socket.io but its not working. I dont know what do I need to get it work and connect my running server.
I Hope, I have clearly explained my problem.
Thank you.

Copy all the files in socket.io\node_modules\socket.io-client\dist to your apache server for example to the js folder. Then add the socket.io.min.js to your page.
<script src="js/socket.io.min.js" type="text/javascript"></script>
<script type="text/javascript">
var socket = io.connect('http://localhost:3000');
socket.on('news', function (data) {
console.log(data);
});
</script>

Copy the distributable .js to your own javascript folder.
In my case, I'm ussing xampp:
C:\xampp\htdocs\nodejs\node_modules\socket.io\node_modules\socket.io-client\dist

Related

Socket.io is not defined in console when hosted

I am a newbie to socket.io and hosting on a Raspberry Pi so I come here to ask help!
I currently want to run a live chat on my web-page which is being hosted on apache2 with the domain of tuckermedia.org. When I run it locally, I do not get the error when I run nodemon server.js and it runs at it should but this doesn't seem to work on the Raspberry Pi.
When I host it on my Raspberry Pi, I constantly get this error: Uncaught ReferenceError: io is not defined (Screen Shot below)
[https://i.stack.imgur.com/asfu2.jpg][1]
Now, I have changed my script SRC to: <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> This is what it currently is.
This however still gives me the same issue. I ensured that I have socket.io, nodemon, and the other packages that I needed. I also ensured that I started the server with nodemon but I still get the same error.
Nodemon screenshot on Raspberry Pi:
https://i.stack.imgur.com/Ao98P.jpg
If you can help me out, thanks! You can also message me on discord at Logans#9830 if you would like to have a conversation. Thanks!
HTML Code: https://pastebin.com/aGhqFFm8
script.js (client side) code: https://pastebin.com/XkXJPDb2
server.js (server side) code: https://pastebin.com/YYvK1dwd
Here is the console sources on my Raspberry Pi compared to it being hosted locally.
https://i.stack.imgur.com/oHndj.jpg
It seems that some of my files don't even show up like they should.
There's should be a correct link to socket.io at your frontend code. I suppose your path to script is the following one:
<script src="/socket.io/socket.io.js"></script>
Try this one:
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
Source: https://cdnjs.com/libraries/socket.io

Applying node.js server to a web server

I am trying to learn how to use Node.js and web sockets to create simple multi-user interactive javascript programs. I used this tutorial series by Daniel Shiffman to create this example project. My next step would be to upload it, using WinSCP, to my RaspberryPi apache2 web server, but I haven't found a way to edit the code in a way to allow for that to work, and furthermore, I do not know what piece of the programs to execute to make it function properly.
Any assistance would be great. The extent of my Node / Socket.io knowledge comes entirely from the video series mentioned above, so you can assume I know almost nothing else.
Apache is a web server and it serves your file and send them to client for you, so when you have some client side things like html site with some css, javascript and images you can use apache to send them to client for you.
In node.js you can create this web server simply by following code and express library:
// Create the app
var app = express();
// Set up the server
var server = app.listen(3000, () => {
console.log('http server is ready')
});
as you created in your code too. by this web server you can host your files and do many more things like setup socket.io server and ... because you write web server yourself. with following code you serve static files in public directory (html, css, javascript and images ...):
app.use(express.static('public'));
after you finishing this process you can run it simply by:
npm install
node server.js
if you want you can run you code inside docker by creating Dockerfile and ...
About your question, you must move all your project files into raspberry and at the end you have following directory tree in somewhere in raspberry:
|- server.js
|- package.json
\ public
at this directory run above commands and your server will be up and running and you can access to it by http://raspberry_ip:3000.

how to install socket.io client

Is it possible to reference socket.io client library with a relative path like:
src="/socket.io/socket.io.js"
instead of
src="https://miweb:6969/socket.io/socket.io.js"
Also to connect the library we do:
var websocket = io.connect ("https://miweb.com:6969");
I have seen some do:
var websocket = io.connect ("/");
As if socket.io were running on the same port and were running on the same project.
What should I do to our server to work this way?
Yes, if your webpage is served from the same location than Socket.io, you can do this:
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('/');
socket...
</script>
But if the page is in another domain you should use an absolute url.

Where is the Socket.IO client-side .js file located?

I am trying to get socket.io (Node library) to work.
I have the server-side js working, and it is listening. The socket.io website states simply:
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>
This is nice, however, what JS file am I importing!?!
I went into the node_modules directory, where I installed socket.io through npm, and inside socket.io/lib/ is socket.io.js file. However, this is server-side (uses the phrase require(), which errors on the client).
I have spent an hour looking around and I can't get any client .js file to work.
What am I missing?
I managed to eventually answer this for myself.
The socket.io getting started page isn't clear on this, but I found that the server side of socket.io automatically hosts the .js file on starting node, in the directory specified in the documentation:
"/socket.io/socket.io.js"
So you literally just point to this url regardless of your web app structure, and it works.
I would suggest checking if your node_modules directory is at the top level of your app directory. Also, I do believe you need to specify a port number; you should write something like var socket = io.connect('http://localhost:1337');, where the port number is 1337.
If you did npm install then the client socket.io file is located at node_modules/socket.io-client/dist/socket.io.js
Source: Socket get-started page
The client is available in a few ways:
supplied by the socket.io server at /socket.io/socket.io.js
included via webpack as the module socket.io-client
via the official CDN https://cdnjs.cloudflare.com/ajax/libs/socket.io/<version>/socket.io.js
For the first one, the server can be configured in a couple of ways:
// standalone
var io = require('socket.io')(port);
// with existing server from e.g. http.createServer or app.listen
var io = require('socket.io')(server);

Node.js serve as a backend server for frontend app

I want to use Node.js run as a back-end server to serve front-end socket.io request.
The samples I found, seems can only run pages from Node.js server.
<script src="/socket.io/socket.io.js"></script>
The above js include is served by Node.js, how to include it if the front-end is a different application (e.g. PHP or static pages) ? Do I need to include all the dependent socket.io js libraries to make it work?
I'm currrently running apache/php alongside node.js/socket.io
If this is what you're trying to do, you can do it by serving socket.io on a different port than what apache is serving on (assumed 80).
In node.js, initialize the socket.io listener on a port 8080 for example:
var io = require('socket.io').listen(8080);
I believe, by default, socket.io will also serve its static client side files conveniently for you, such that in you html, you can:
<script src="http://yourhost:8080/socket.io/socket.io.js"></script>
Hope that helps.
It all depends on your server configuration. You may choose a path to Node.js backend that is not used by any other resource, and configure your web-server to serve everything else.
E.g. for Apache I used ProxyPass directive to enable connections to a local Node.js on a different port (to bypass local port restrictions), though may be not an option for your purposes:
ProxyPass /help/server/ http://localhost:8002/ connectiontimeout=1500ms

Categories

Resources