My shoutbox project works just find when I run it on localhost, "npm start" for the "server.js" which and I use Live Server to open "client.js" in browser. In localhost everything runs smoothly, when server starts, I can open it in browser. API request are sent good an received data parsed, display and also saved to MongoDB.
But when I deployed it onto Netlify, the following looping errors appear in the console:
"Failed to load resource: the server responded with a status of 404 (Not Found)" "polling-xhr.js:202 GET https://shoutboxbymurad.netlify.app/socket.io/?EIO=4&transport=polling&t=O1xOrfM 404 (Not "
Client.js is:
// Variables:
const socket = io('localhost:3000'); //localhost:3000
const messages = document.getElementById('messages'); // Messages field
const msgForm = document.getElementById('msgForm'); // Message form
const msgInput = document.getElementById('msgInput'); // Message input field
const userNameInput = document.getElementById('username'); // Username input field
const usrsList = document.getElementById('users-list');
var userName = '';
var onlineUsers = [];
var clientIp = '';
var clientRegion = '';
// Functions:
socket.on('welcome-message', (msg) => {
const html = `<div style="font-weight: bold; color:rgb(53, 247, 111);">${msg}</div>`;
messages.innerHTML += html;
});
socket.on('message', (msg, usr) => {
appendMessage(msg, usr);
});
const appendMessage = (message, user) => {
handleURL(message, user);
};
const handleURL = (message, user) => {
message = message.split(' ');
for (let i = 0; i < message.length; i++) {
if (message[i].includes('http' || 'https')) {
message[i] =
`${message[i]}`;
}
}
message = message.join(' ');
const html = `<div style="font-weight: bold; text-transform: uppercase; color: black; font-size: 1rem">${user}:<span style='text-transform: none;'>${message}</span></div>`;
messages.innerHTML += html;
};
socket.on('get-messages', (data) => {
let arr = [];
let limitMessages = 9; // Number of messages new connect users will get (9 by default, change if want otherwise)
for (let i = 0; i < data.length; i++) {
arr.push(JSON.parse(data[i]));
}
if (arr.length > limitMessages) {
// if number of messages in array is more than 9, then get the last 9 messages
arr = arr.slice(arr.length - limitMessages);
}
arr.map((msg) => {
const html = `<li style="color:blue;font-weight:bold; font-size: 1rem">${msg.name}:<span style="color:blue">${msg.message}<span></li>`;
messages.innerHTML += html;
});
});
socket.on('get-online-users-list', (usersData) => {
appendToOnlineBox(usersData);
});
socket.on('update-online-users-list', (data) => {
// alert(data);
removeFromOnlineBox(data);
});
const removeFromOnlineBox = (data) => {
usrsList.innerHTML = '';
let arr = [];
for (let i = 0; i < data.length; i++) {
arr.push(JSON.parse(data[i]));
}
onlineUsers.length = 0;
for (let i = 0; i < arr.length; i++) {
if (!onlineUsers.includes(arr[i].name)) {
onlineUsers.push(arr[i].name, arr[i].ip, arr[i].clientRegion);
}
}
onlineUsers.map((user) => {
let onlineUser = `<li style="border: 4px solid blue; padding:0px; margin:0"><div style="border: 2px solid green; padding:0">${user}</div></li>`;
usrsList.innerHTML += onlineUser;
});
};
const appendToOnlineBox = (data) => {
usrsList.innerHTML = '';
let arr = [];
for (let i = 0; i < data.length; i++) {
arr.push(JSON.parse(data[i]));
}
for (let i = 0; i < arr.length; i++) {
if (!onlineUsers.includes(arr[i].name)) {
onlineUsers.push(arr[i].name, arr[i].ip, arr[i].clientRegion);
}
}
onlineUsers.map((user) => {
let onlineUser = `<li style="border: 4px solid blue; padding:0px; margin:0"><div style="border: 2px solid green; padding:0">${user}</div></li>`;
usrsList.innerHTML += onlineUser;
});
};
msgForm.addEventListener('submit', (e) => {
e.preventDefault();
socket.emit(
'chatmessage',
userName,
socket.id,
msgForm.msg.value,
clientIp,
clientRegion
);
msgForm.msg.value = '';
});
const checkUserName = () => {
msgInput.disabled = true;
userNameInput.addEventListener('change', () => {
if (userNameInput.value !== '') {
msgInput.disabled = false;
userNameInput.disabled = true;
userName = userNameInput.value;
}
});
};
// GET CLIENT INFO:
const getClientIpAndRegion = () => {
fetch('http://www.geoplugin.net/json.gp')
.then((res) => res.json())
.then((data) => {
clientIp = data.geoplugin_request;
clientRegion = data.geoplugin_countryName;
});
};
// Function calls:
checkUserName(); // Check if a user inserted a useraname
getClientIpAndRegion(); // Get clients' IP address and client Geolocation (region)
Server.js is:
const mongoose = require('mongoose'); // get mongoose
const mongoDB =
'....';
mongoose
.connect(mongoDB, {
useUnifiedTopology: true,
useNewUrlParser: true,
})
.then(() => {
console.log('Conncected to MongoDB...');
})
.catch((err) => {
console.log(err);
});
const UsrData = require('./Models/UserDataSchema');
var io = require('socket.io')(3000, {
cors: {
origin: '*',
},
});
var user = new Object(); // Socket client user object
var userData = []; // objects array to store information on connected user's name, socket.id and message : Array of object strings
var data; // variable to hold UserData Schema
io.on('connection', (socket) => {
socket.emit('welcome-message', 'WELCOME TO THE SHOUTBOX'); // Emit welcome message to new user
io.emit('get-online-users-list', userData); // Emit online users list to new user
socket.emit('get-messages', userData); // Emit all previous messages from users to new user
socket.on('disconnect', () => {
//handle user disconnect
let arr = [];
for (let i = 0; i < userData.length; i++) {
arr.push(JSON.parse(userData[i]));
}
arr = arr.filter((user) => user.socketId !== socket.id);
userData.length = 0;
for (let i = 0; i < arr.length; i++) {
userData.push(JSON.stringify(arr[i]));
}
io.emit('update-online-users-list', userData);
});
socket.on(
'chatmessage',
(username, socketid, formValue, clientIp, clientRegion) => {
if (username !== '' && formValue !== '') {
user.name = username;
user.socketId = socketid;
user.message = formValue;
user.ip = clientIp;
user.clientRegion = clientRegion;
io.emit('message', user.message, user.name);
userData.push(JSON.stringify(user));
data = new UsrData({ data: userData }); //===> Create a new NoSQL document with userData
data.save(); // ===> Save the document to MongoDb
io.emit('get-online-users-list', userData);
}
}
);
});
Related
I tried to send my variable back from foreground.js to background.js by using an unchanged variable, and it works. Now I can't send some data that I use my AddEventListener syntax to store the data into the variable to call its back to background.js here are my code on foreground.js
foreground.js
console.log("foreground.js injected");
var pswdBtns = [];
let hrefLists = [];
var data = {};
var i;
function readUUID(){
var navigator_info = window.navigator;
var screen_info = window.screen;
var uid = navigator_info.mimeTypes.length;
uid += navigator_info.userAgent.replace(/\D+/g, '');
uid += navigator_info.plugins.length;
uid += screen_info.height || '';
uid += screen_info.width || '';
uid += screen_info.pixelDepth || '';
return uid;
}
async function passwordProtected(pointerList){
const date = new Date();
const uid = readUUID();
alert("You are in dangerous on \'"+ pointerList.title + "\' row = " + pointerList.id.slice(20));
data = {
"Webtitle": pointerList.href,
"Title": pointerList.title,
"Time": date.toString(),
"UUID": uid
}
console.log("foreground = ", data);
return data;
}
console.log("Start loop")
//This function made for collect each id in passwordShowPasswordButton
for(i = 0; i<=pswdBtns.length; i++){
if(document.querySelector("#passwordShowPasswordButton_"+ i) == null){
console.log("This is your limit!!");
}
else{
hrefLists[i] = document.querySelector("#passwordWebsitelink_"+ i);
pswdBtns[i] = document.querySelector("#passwordShowPasswordButton_"+ i);;
data = pswdBtns[i].addEventListener('click', passwordProtected.bind(pswdBtns[i], hrefLists[i]));
console.log(hrefLists[i].title); /* Title VARCHAR(30) */
console.log(hrefLists[i].href); /* Website VARCHAR(50) */
}
}
console.log("End");
and these are my code on background.js
background.js
const edgePswd = "edge://settings/passwords";
const settingPage = "edge://settings/";
chrome.tabs.onActivated.addListener(async (tab) => {
await chrome.tabs.get(tab.tabId, (current_tab_info) => {
var pswdPageChecked = 1;
while(pswdPageChecked < 2) {
if (edgePswd == current_tab_info.url) {
chrome.tabs.executeScript(null, { file: "/extension/foreground.js" }, (data) => {
console.log("Coming to foreground");
console.log(data);
});
pswdPageChecked++;
}
}
});
});
It would be a pleasure if someone can figure this.
i deployed an app to heroku which has a fucntion that counts clicks of elements and add it to JSON file
my main.js is like this
var fs = require('fs');
var file = fs.readFileSync('count.json');
var Words = JSON.parse(file);
const express = require('express');
const app = express();
app.listen(process.env.PORT || 3000, () => console.log('we are listeining'));
app.use(express.static('public'));
app.use(express.json({ limit : '1mb' }));
app.get('/add/:word', addWord);
function addWord(request, response) {
var data = request.params;
var word = data.word;
var reply;
var found = false;
for (i = 0; i < Words.length; i++){
if (Words[i].type == word){
Words[i].count++;
found = true;
break;
}
}
if (!found) {
Words.push({"type": word , "count": 1});
}
var x = JSON.stringify(Words, null, 2);
fs.writeFile('count.json', x, finished);
function finished(){
console.log('Yay')
}
/*
console.log(Words[word]); */
/* response.send(reply); */
}
and the script file is like this
all.forEach(element => {
element.addEventListener('click', function(e){
elemid = e.target.id;
elemclass = e.target.className;
let div = document.createElement('div');
div.id = elemid + "_overlay";
div.className = "overlay";
document.body.appendChild(div);
div.style.display = "block";
fetch(elemid+'.txt')
.then(response => response.text())
.then((data) => {
div.innerHTML = data;
}).then(fetch("/add/"+elemid)
.then(response => {
return response.json();
}).then(function(data){
console.log(data[0].count);
})
.then(fetch('js/cases.json')
.then(response => response.json())
.then((data) =>{
for (i = 0; i < data.length; i++){
if (elemid == data[i].case){
let a = document.createElement('a');
a.id = data[i].id;
a.innerText = data[i].case
div.appendChild(a);
}
}
console.log(data[0].id);
})
)
)
}, false)
})
locally it writes the JSON of of count perfectly but when deployed it on heroku changes doesn't take effect and there is no error appears in the console.
I'm trying to write a code that makes a request to a website, for webscraping
So this are the steps:
Here First part of Code STARTS
The program makes the request to the mainURL
The program selects some objects from the html of the mainURL, and store them in an array of objects(advert), on of the properties of the object, is it's link, which we'll call numberURL, that the code automatically selects using a css selector, the amount of objects is something like 80-90;
The program makes requests to every numberURL(80-90 requests),
and for each of them it does set another properties to the same object, and selects another link, that we'll call accountURL
The program creates an CSV file where it writes every object in different rows
Here First part of Code ENDS
So actually the first part works pretty good, it doesn't have any issues, but the second part does
Here Second part of Code STARTS
The program makes requests to every accountURL from the previous object
The program selects some objects from the html of the accountURL, and stores them in an another array of another objects(account), also using CSS selectors
The program should console.log() all the account objects
Here Second part of Code ENDS
But the second part does have some bugs, because when console.logging the objects we see that the objects properties doesn't changed their default value.
So in debugging purposes I took one advert object and putted it's value manually from the code
post[0].link = 'https://999.md/ru/profile/denisserj'
Finally when running the code for this object it actually works correctly, so it shows the changed properties, but for the rest of them it doesn't.
I tried to set some Timeouts, thinking that the code tries to read the link, before the second request finished, but no effects
I also tried to console.log the link, to see if it exists in the array, so it actually exists there, but also no effect.
Finally here is the code:
// CLASSES
class advert {
constructor() {
this.id = 0;
this.tile = new String();
this.link = new String();
this.phone = new String();
this.account = new String();
this.accountLink = new String();
this.text = new String();
this.operator = new String();
}
show() {
console.log(this.id, this.title, this.link, this.phone, this.account, this.accountLink, this.text, this.operator);
}
}
class account {
constructor() {
this.name = 0;
this.createdAt = 0;
this.phone = [];
this.ads = [];
this.adsNumber = 0;
}
show() {
console.log(this.name, this.createdAt, this.phone, this.ads, this.adsNumber);
}
}
// HEADERS
const mainRequest = require('request');
const auxRequest = require('request');
const cheerio1 = require('cheerio');
const cheerio2 = require('cheerio');
const fs = require('fs');
const fs2 = require('fs');
const adFile = fs.createWriteStream('anunturi.csv');
const accFile = fs2.createWriteStream('conturi.csv');
// SETTINGS
const host = 'https://999.md'
const category = 'https://999.md/ru/list/transport/cars'
const timeLimit = 60; //seconds
// VARIABLES
let post = [];
let postNumber = 0;
let acc = [];
// FUNCTIONS
function deleteFromArray(j) {
post.splice(j, 1);
}
function number(i) {
let category = post[i].link;
auxRequest(category, (error, response, html) => {
if (!error && response.statusCode == 200) {
const $ = cheerio1.load(html);
let phone;
const siteTitle = $('strong').each((id, el) => {
phone = $(el).text();
});
const txt = $('.adPage__content__description').html();
const person = $('.adPage__header__stats').find('.adPage__header__stats__owner').text();
const linkToPerson = host + $('.adPage__header__stats').find('.adPage__header__stats__owner').find('a').attr('href');
post[i].phone = phone;
post[i].account = person;
post[i].accountLink = linkToPerson;
post[i].text = txt;
if (i == postNumber) {
console.log('1. Number Putting done')
writeToFileAd(accountPutter, writeToFileAccount);
}
}
});
}
function writeToFileAd() {
adFile.write('ID, Titlu, Link, Text, Cont, LinkCont, Operator\n')
for (let i = 0; i <= postNumber; i++) {
adFile.write(`${post[i].id}, ${post[i].title}, ${post[i].link}, ${post[i].phone}, ${post[i].account}, ${post[i].accountLink}, ${post[i].operator}\n`);
}
console.log('2. Write To File Ad done')
accountPutter();
}
function accountAnalyzis(i) {
let category = post[i].link;
const mainRequest = require('request');
category = category.replace('/ru/', '/ro/');
mainRequest(category, (error, response, html) => {
if (!error && response.statusCode == 200) {
const $ = cheerio2.load(html);
const name = $('.user-profile__sidebar-info__main-wrapper').find('.login-wrapper').text();
let createdAt = $('.date-registration').text();
createdAt = createdAt.replace('Pe site din ', '');
const phones = $('.user-profile__info__data').find('dd').each((id, el) => {
let phone = $(el).text();
acc[i].phone.push(phone);
});
const ads = $('.profile-ads-list-photo-item-title').find('a').each((id, el) => {
let ad = host + $(el).attr('href');
acc[i].ads.push(ad);
acc[i].adsNumber++;
});
acc[i].name = name;
acc[i].createdAt = createdAt;
console.log(name)
if (i == postNumber) {
console.log('3. Account Putting done')
writeToFileAccount();
}
}
});
}
function writeToFileAccount() {
for (let i = 0; i <= postNumber; i++) {
accFile.write(`${acc[i].name}, ${acc[i].createdAt}, ${acc[i].phone}, ${acc[i].ads}, ${acc[i].adsNumber}\n`);
}
console.log('4. Write to file Account done');
}
function numberPutter() {
for (let i = 0; i <= postNumber; i++) {
number(i);
}
}
function accountPutter() {
for (let i = 0; i <= postNumber; i++) {
accountAnalyzis(i);
}
}
// MAIN
mainRequest(category, (error, response, html) => {
let links = [];
for (let i = 0; i < 1000; i++) {
post[i] = new advert();
}
for (let i = 0; i < 1000; i++) {
acc[i] = new account();
}
if (!error && response.statusCode == 200) {
const $ = cheerio2.load(html);
const siteTitle = $('.ads-list-photo-item-title').each((id, el) => {
const ref = host + $(el).children().attr('href');
const title = $(el).text();
post[id].id = id + 1;
post[id].title = title;
post[id].link = ref;
links[id] = ref;
postNumber = id;
});
post[0].link = 'https://999.md/ru/profile/denisserj'
numberPutter()
}
});
You have an error in line
const siteTitle = $('.ads-list-photo-item-title').each((id, el) => {
What you actually want is .find('a').each...
After sending a bunch of POST/GET reqs to the server my server stops responding and in the network tab of the console all the reqs are labeled as "pending".
I have logged timestamps during the responses but they go fast and they just don't run once the problem occurs.
Sever:
var ip = require('ip');
var fs = require('fs');
var bodyParser = require('body-parser');
var path = require('path');
var express = require('express');
var app = express();
var expressWs = require('express-ws')(app);
var students = [];
var cons = [];
app.use(bodyParser.text({
extended: true
}));
app.post('/add', function(req, res) {
students.push(req.body);
for (var i = 0; i < cons.length; i++) {
cons[i].send(JSON.stringify(students));
}
});
app.post('/del', function(req, res) {
for (var i = 0; i < students.length; i++) {
if (students[i] == req.body) {
students.splice(i, 1);
}
}
for (var i = 0; i < cons.length; i++) {
cons[i].send(JSON.stringify(students));
}
});
app.get('/students', function(req, res) {
res.send(JSON.stringify(students));
});
app.ws('/mes', function(ws, req) {
cons.push(ws);
ws.on('close', function(req) {
for (var i = 0; i < cons.length; i++) {
if (cons[i] == ws) {
cons.splice(i, 1);
}
}
});
});
Sender:
function sendData() {
if (okMes() == true) {
console.log(student_i.value);
fetch('/add', {
method: 'POST',
body: student_i.value
})
.catch(function(err) {
console.error(err);
});
student_i.value = '';
}
}
Reciever:
function placeButton(data) {
if (data.length == 0) {
error_p.style.display = 'block';
error_p.innerHTML = 'No New Students';
}
for (var i = 0; i < 200; i++) {
if (document.getElementById(i) != null) {
document.getElementById(i).remove();
}
}
students = [];
for (var i = 0; i < data.length; i++) {
student = document.createElement('button');
student.innerHTML = data[i];
students_d.appendChild(student);
students.push(student);
student.setAttribute('id', students.length - 1);
error_p.style.display = 'none';
}
for (var i = 0; i < students.length; i++) {
students[i].onclick = function() {
for (var i = 0; i < students.length; i++) {
if (students[i] == this) {
students.splice(i, 1);
}
}
// document.getElementById(this.getAttribute('id')).remove();
fetch('/del', {
method: 'POST',
body: this.innerHTML
});
if (document.querySelectorAll('button') == []) {
error_p.style.display = 'block';
error_p.innerHTML = 'No New Students';
}
}
}
}
// seting interval and fetching for '/students' and calling this func
// reciving ws.onmessage and calling this func
I have no idea why my reqs aren't being responded to and if anyone could help that would be great.
Fetch API expects full url. Change your fetch call to:
// assuming you're running on localhost on port 3000
fetch('http://localhost:3000/del', {
method: 'POST',
body: this.innerHTML
});
I just figured out the answer while testing my code. It turned out I didn't res.end() when handling post reqs and I guess it the reqs might have timed out.
mobilenet.js
var loadFrozenModel = require('#tensorflow/tfjs-converter');
var NamedTensorMap = require('#tensorflow/tfjs-converter');
var tfc = require('#tensorflow/tfjs-core');
var IMAGENET_CLASSES = require('./imagenet_classes');
const GOOGLE_CLOUD_STORAGE_DIR = 'https://storage.googleapis.com/tfjs-models/savedmodel/';
const MODEL_FILE_URL = 'mobilenet_v1_1.0_224/optimized_model.pb';
const WEIGHT_MANIFEST_FILE_URL = 'mobilenet_v1_1.0_224/weights_manifest.json';
const INPUT_NODE_NAME = 'input';
const OUTPUT_NODE_NAME = 'MobilenetV1/Predictions/Reshape_1';
const PREPROCESS_DIVISOR = tfc.scalar(255 / 2);
class MobileNet {
constructor() {}
async load() {
this.model = await loadFrozenModel(
GOOGLE_CLOUD_STORAGE_DIR + MODEL_FILE_URL,
GOOGLE_CLOUD_STORAGE_DIR + WEIGHT_MANIFEST_FILE_URL);
}
dispose() {
if (this.model) {
this.model.dispose();
}
}
predict(input) {
const preprocessedInput = tfc.div(
tfc.sub(input.asType('float32'), PREPROCESS_DIVISOR),
PREPROCESS_DIVISOR);
const reshapedInput =
preprocessedInput.reshape([1, ...preprocessedInput.shape]);
const dict = {};
dict[INPUT_NODE_NAME] = reshapedInput;
return this.model.execute(dict, OUTPUT_NODE_NAME);
}
getTopKClasses(predictions, topK) {
const values = predictions.dataSync();
predictions.dispose();
let predictionList = [];
for (let i = 0; i < values.length; i++) {
predictionList.push({value: values[i], index: i});
}
predictionList = predictionList
.sort((a, b) => {
return b.value - a.value;
})
.slice(0, topK);
return predictionList.map(x => {
return {label: IMAGENET_CLASSES[x.index], value: x.value};
});
}
}
module.exports = MobileNet;
test.js
var tfc = require('#tensorflow/tfjs-core');
var MobileNet = require('./mobilenet');
var fs = require('fs');
var image = require('get-image-data')
var i = 0;
var meta;
image('./cat.jpg', function(err, getImageData){
if(err) throw err;
console.log('start to image data ');
console.log(i++);
console.log("meta : " + getImageData.data.length);
console.log("getImageData :"+getImageData);
const mobileNet = new MobileNet();
console.time('Loading of model');
// await mobileNet.load();
console.timeEnd('Loading of model');
console.log("maybee this is error on the data type");
const pixels = tfc.fromPixels(image);
console.time('First prediction');
let result = mobileNet.predict(pixels);
const topK = mobileNet.getTopKClasses(result, 5);
console.timeEnd('First prediction');
resultElement.innerText = '';
topK.forEach(x => {
resultElement.innerText += `${x.value.toFixed(3)}: ${x.label}\n`;
});
console.time('Subsequent predictions');
result = mobileNet.predict(pixels);
mobileNet.getTopKClasses(result, 5);
console.timeEnd('Subsequent predictions');
mobileNet.dispose();
});
I want to analyze the image using the tensorflow.js.
But it doesn't work.
ReferenceError: ImageData is not defined
at MathBackendCPU.fromPixels (/Users/leeyongmin/Documents/tfjs-converter-master-2/demo/node_modules/#tensorflow/tfjs-core/dist/kernels/backend_cpu.js:75:31)
at Engine.fromPixels (/Users/leeyongmin/Documents/tfjs-converter-master-2/demo/node_modules/#tensorflow/tfjs-core/dist/engine.js:292:29)
at ArrayOps.fromPixels (/Users/leeyongmin/Documents/tfjs-converter-master-2/demo/node_modules/#tensorflow/tfjs-core/dist/ops/array_ops.js:195:41)
at /Users/leeyongmin/Documents/tfjs-converter-master-2/demo/node_modules/#tensorflow/tfjs-core/dist/ops/operation.js:11:61
at Object.Tracking.tidy (/Users/leeyongmin/Documents/tfjs-converter-master-2/demo/node_modules/#tensorflow/tfjs-core/dist/tracking.js:36:22)
at Object.descriptor.value [as fromPixels] (/Users/leeyongmin/Documents/tfjs-converter-master-2/demo/node_modules/#tensorflow/tfjs-core/dist/ops/operation.js:11:26)
at /Users/leeyongmin/Documents/tfjs-converter-master-2/demo/test.js:26:22
at /Users/leeyongmin/Documents/tfjs-converter-master-2/demo/node_modules/get-image-data/index.js:18:7
at load (/Users/leeyongmin/Documents/tfjs-converter-master-2/demo/node_modules/get-image/server.js:18:5)
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)