Dont find socket.io - javascript

Files
chat
node_modules
web
public
css
estilo.css
img
tiempo.jpg
js
script.js
view
vista.html
app.js
package.json
JSON
{
"name":"chat",
"version":"0.0.1",
"privte":"true",
"dependencies":{
"socket.io":"1.4.8",
"express": "4.14.0"
}
}
In the File vista.html I can't open or load the soket.io, but I can load the files: pictures, css, js - don't have a problem with that. The problem is to try to load soket.io
NODE.js File, app.js
var express = require("express"),
app = express(),
http = require("http").Server(app),
io = require("socket.io")(http),
nicknames=[],
users={};
app.listen(3000, function () {
console.log('SERVIDOR LISTO');
});
app.use(express.static(__dirname + '/web/public'));
app.get("/",function(req, res){
res.sendFile( __dirname+'/web/public/view/index.html');
});
io.sockets.on("connection", function(socket){
.......
.......
}
and my html file is
<html>
<head>
<title></title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<img src="http://localhost:3000/img/tiempo.jpg"
alt="Smiley face" height="30%" width="30%">
</body>
</html>

I found the solution to my problem. I had to reorder the code, what starts first and finish with the last.
var express = require('express'),
app = express(),
io = require('socket.io'),
nicknames=[],
users={};
var server=app.listen(3000, function () {
console.log('SERVIDOR LISTO');
});
var mysocket = io.listen(server);
app.use(express.static(__dirname + '/web/public'));
app.get("/",function(req, res){
res.sendFile( __dirname+'/web/public/view/index.html');
});

Related

i was usin node and try to work with socket but getting error again and again

HER MY CODE IS :
IN app.js or SERVER CODE
var express = require("express");
var app= express();
var http = require("http");
var http = require("http");
var server= http.createServer(app);
var port = 5000 || process.env.PORT;
var socket= require("socket.io").listen(server);
var path = require("path")
app.use(express.static(path.join(__dirname+"/public")))
app.get("/", (req, res)=>{
res.sendFile(__dirname+"/index.html");
});
socket.on("connection", (socket)=>{
console.log("SOCKET IS CONNECTED")
})
server.listen(port, ()=>{
console.log(`connected at port no: ${port}`)
})
//IN INDEX.HTML
<script src="/socket.io/socket.io.min.js"></script>
<script src="/js/main.js"></script>
i have also tried
<script src="http://localhost:5000/socket.io/socket.io.js"></script>
<script src="/js/main.js"></script>
//IN MAIN.JS
var socket = io("http://localhost:5000");
but getting this error :
VM554:5551 crbug/1173575, non-JS module files deprecated.
in network tab i got "FAILED TO LOAD RESPOND DATA"
and in this directory i could not find socket.io.js:
C:\Users\pc\Desktop\socket\back\node_modules\socket.io\client-dist
can anyone help me plzz i was trying to figure it out for 2 days

Serve an HTML file in node.js

app.get('/',(req,res)=>{
res.send("index.html ");});
app.listen(3000);
console.log("Server Started");
whenever i enter my local host IP address it displays "index.html" text instead of opening index.html file
You are trying to serve an HTML file, so you have to res.sendFile().
var express = require('express');
var app = express();
var path = require('path');
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(3000);

How to refer a css file from index.html in React

I have a folder called assets which have a styles.css and then I have index.html which I would want to reference styles.css but for some reason it can't.
My current solution is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My App</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>
And I have the node server running like this:
var webpack = require("webpack");
var config = require("./webpack.config.js");
var http = require('http');
var express = require('express');
var app = express();
var proxy = require('http-proxy-middleware');
var path = require('path');
const compiler = webpack(config);
app.use(require("webpack-dev-middleware")(compiler, {
noInfo: true,
publicPath: "/"
}));
app.use(require("webpack-hot-middleware")(compiler));
app.use('/auth', proxy('http://localhost:8081', {changeOrigin: true}));
app.use('/api', proxy('http://localhost:8081', {changeOrigin: true}));
app.get("*", function(req, res) {
res.sendFile(__dirname + '/index.html');
});
/**
* Anything in public can be accessed statically without
* this express router getting involved
*/
app.use(express.static(path.join(__dirname, 'assets'), {
dotfiles: 'ignore',
index: false
}));
var server = http.createServer(app);
server.listen(3000, function() {
console.log("express listening at localhost:3000");
});
This is not working for me it cannot find the css file, how can I make it so I can reference the css file from index.html. Also I have index.js on my src folder which is used as an entrance file for running the whole React App.
Add the route for styles.css before app.get("*",...)
app.get("/styles.css", function(req, res) {
res.sendFile(__dirname + '/styles.css');
});

404 while importing external scripts angular

I am trying to include Angular module as a separate file.
Here is my app.js
var app = angular.module('app', ['ngRoute']);
app.controller("TodoController", function($scope) {
$scope.players = ["Tom", "Dick", "Harry"];
});
This is my index.html
<html ng-app="app">
<head>
<title>Hello Angular!</title>
</head>
<body ng-controller="TodoController">
<input type="text" name="" ng-model="name"> {{name}}
<ul>
<li ng-repeat="player in players">
{{ player }}
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
I am using express with node. This is my server.js
var express = require('express');
var app = express();
var path = require('path');
var port = process.env.PORT || 5000;
app.get('/', function(req, res){
//res.sendfile('./index.html');
res.sendFile('index.html', { root: path.join(__dirname) });
});
app.listen(port);
console.log('Express app is listening on : ' + port);
When I am trying to execute I am getting http://localhost:5000/scripts/app.js 404 (Not Found)
Code is working well when everything put in to the index.html.
File Structure is like this.
-- index.html
-- server.js
-- scripts
-- app.js
I have found the solution. as mentioned on the comment issue was with Serving static files in Express. I have included this code to the server.js.
app.use(express.static('public'))
I also created the public folder and included app.js to the public folder.
My new code looks like this.
public/index.html
<html ng-app='app'>
<head>
<title>Hello Angular!</title>
</head>
<body ng-controller="TodoController">
<input type="text" name="" ng-model="name"> {{name}}
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.completed">
{{todo.title}}
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script>
<script type='text/javascript' src="app.js" charset="UTF-8"></script>
<script type='text/javascript' src="app/controllers/TodoController.js" charset="UTF-8"></script>
</body>
</html>
Server.js
var express = require('express');
var app = express();
var path = require('path');
var port = process.env.PORT || 5000;
app.get('/', function(req, res){
res.sendFile('index.html', { root: path.join(__dirname, 'public') });
});
app.use(express.static(path.join(__dirname, 'public')));
app.listen(port);
console.log('Express app is listening on : ' + port);
public/controllers/TodoController.js
app.controller('TodoController', ['$scope', function ($scope) {
$scope.todos = [
{ title: 'Learn Javascript', completed: true },
{ title: 'Learn Angular.js', completed: false },
{ title: 'Love this tutorial', completed: true },
{ title: 'Learn Javascript design patterns', completed: false },
{ title: 'Build Node.js backend', completed: false },
];
}]);
public/app.js
var app = angular.module('app', []);
New file structure will be like this.
-- public
-- app
-- controllers
-- TodoController.js
-- app.js
-- index.html
-- server.js
-- package.json
Since you have only http://localhost:5000/ route which is exposed which renders index.html file.
app.get('/', function(req, res){
//res.sendfile('./index.html');
res.sendFile('index.html', { root: path.join(__dirname) });
});
Any other path will give you 404.
You cannot access http://localhost:5000/scripts/ directly.
To access scripts please add the following line in server.js
app.use(express.static(path.join(__dirname, 'scripts')));
Updated code for server.js will be.
var express = require('express');
var app = express();
var path = require('path');
var port = process.env.PORT || 5000;
app.use(express.static(path.join(__dirname, 'scripts')));
app.get('/', function(req, res){
//res.sendfile('./index.html');
res.sendFile('index.html', { root: path.join(__dirname) });
});
app.listen(port);
console.log('Express app is listening on : ' + port);
Now http://localhost:5000/scripts/app.js should not give 404.
Not just scripts/app.js, You can access any file which is in scripts folder now.

Cannot load html image using localhost node.js/express.js server

I'm using the following node.js/express.js server,
index.js:
const express = require('express');
const path = require('path');
const app = express();
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(8000, function () {
console.log('Listening on port: 8000!');
});
and the following html file,
index.html:
<!doctype html>
<html>
<head>
<title>Will Alley</title>
</head>
<body>
<style type="text/css">
img {
width: 100%;
height: 100%;
}
</style>
<h2 id="myName">Will Alley</h2>
<img src="./DSC_1546_700_464.jpg" alt="an image.">
</body>
</html>
all my files (index.js, index.html, DSC_1546_700_464.jpg) are in the same directory.
when I start my server and navigate to "localhost:8000" all that is displayed is the heading, and the images alt text.
Any help is greatly appreciated.
You have only one route in express, the one for '/'.
Below are two additions, one that answers your specific question by adding app.use(express.static(__dirname)) which is dangerous. The safer way is to use something like app.use('/images',express.static(__dirname+'/images')) to serve just certain subdirectories where you put servable stuff.
const express = require('express');
const path = require('path');
const app = express();
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
// Static route for files in the current directory...
// Note that this serves all files relative to the given
// path, even ones you probably don't want.
app.use(express.static(__dirname));
// Note: you should really put these files in a subdirectory
// And use static like this:
app.use('/images', express.static(__dirname +'/images'));
app.listen(8000, function () {
console.log('Listening on port: 8000!');
});

Categories