I had taken the code below form this tutorial initially: SignalR Getting Started Application that will create a chat room. I've cleaned the html code a little bit to get only the part that I am going to need. I verified chat is still working:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalR-2.0.0.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
var chat = $.connection.chatHub;
chat.client.broadcastMessage = function (name, message) {
console.log('name is: ' + name);
console.log('message is: ' + message);
};
$.connection.hub.start().done(function () {
chat.server.send("khaled7", "message9");
});
});
</script>
As you can there are 3 javascripts files and 1 script block:
Now, I need to join all these scripts into one single file and send that to my remote mobile clients. I'm still at the web side, so I started joining the files/script top down. Joining the top 2 worked OK, but once trying to add the 3rd (/signalr/hubs), I get a 404 error in my chrome console:
http://localhost:52528/HubSample/signalr/negotiate?connectionData=%5B%7B%22name%22%3A%22chathub%22%7D%5D&clientProtocol=1.3&_=1464332439400
It is imperative for me to join them all. How can I go around this error!?
"/signalr/hubs" is not a physical file, it's a dynamically generated JavaScript code.
SignalR creates the JavaScript code for the proxy on the fly and
serves it to the client in response to the "/signalr/hubs" URL.
What you want to do is to create a physical file for the SignalR generated proxy that you can add to your single file:
Install the Microsoft.AspNet.SignalR.Utils NuGet package.
Open a command prompt and browse to the tools folder that contains the SignalR.exe file. The tools folder is at the following location:
[your solution folder]\packages\Microsoft.AspNet.SignalR.Utils.2.1.0\tools
Enter the following command:
signalr ghp /path:[path to the .dll that contains your Hub class]
The path to your .dll is
typically the bin folder in your project folder.
This command creates a file named server.js in the same folder as signalr.exe.
Put the server.js file in an appropriate folder in your project, rename it as appropriate for your application, and add a reference to
it in place of the "signalr/hubs" reference.
The problem is that you'll have to do this for every change in your hubs. Every. Single. time.
Related
In the Next JS server-side pages/api, I have a function that makes a post request to a service requiring two files.
I am trying to read these files using the following code:
var fullPhotoPath = process.cwd() + '/public/photos/photo.png'
var photoStream = fs.createReadStream(fullPhotoPath)
This works when I run the app locally, but it fails with file not found error when deployed.
I assume the pathing in server changes because of webpack, though I am not familiar with NextJS.
Things I have tried:
Use relative path
Move photo files to different locations either public or private folders
Deploy in different environments: same error in both Firebase or Vercel hosting.
Workaround with getStaticProps/getServerSideProps: can't send file to API functions since they aren't JSON-able.
Thanks for suggestions.
I have my application developed in node.js, and I have cyberpanel installed on my server. I have seen many examples of how to deploy a node application in cyberpanel, but I have doubts about how to view it from the browser.
So far I have the following configuration in vHost:
context / {
type appserver
location /FOLDER/FOLDER/PROJECT_FOLDER/dist
binPath /usr/bin/node
startupFile index.js
appType node
maxConns 100
}
My application runs perfectly on port 3000 when I run it by console, but I need to list it on port 80 with cyberpanel.
Does anyone have an idea how to do it?
try the following steps. Essentially, the error lies in selecting the root document folder and allowing access to the application.
Create a Website using the normal CyperPanel menu. [https://cyberpanel.net/docs/2-creating-website/]
Upload your Node.Js files into the public_html folder of the website.
Enter the Open Lite Speed panel via port :7080 (you would need to enable the port on the firewall)
Navigate to VH Hosts > Your Domain > Context
Select App Server, for location using $VH ROOT instead of the hardcoded path worked.
Additionally, don't forget to enable the site on access control via allowing all IPs (*).
context / {
type appserver
location $VH_ROOT/public_html/
binPath /usr/bin/node
appType node
startupFile server.js //this is the name of your
appserverEnv 1
maxConns 100
accessControl {
allow *
}
rewrite {
}
ad
See I am going to answer point to point to the question
First of all cyberpanel by default only takes app.js file as its core file to run the application.
Second, How to change that default file pointing ?
context / {
type appserver
startupFile index.js // **NAME OF YOUR STARTUP FILE**
location /home/PROJECT_FOLDER/public_html/dist
binPath /usr/bin/node
appType node
appserverEnv 1
maxConns 100
accessControl {
allow *
}
rewrite {
}
ad
location /FOLDER/FOLDER/PROJECT_FOLDER/dist
Note :- Things, I want to mention about this location parameter is this is the location to the your startup file, you will get it via file manager, as you cannot run typescript code directly here, you have to convert it into javascript using tsc command and further target dist folder using location parameter in vconfig file
Now next question is how to run application outside console ?
Create a website to deploy the project, use below link for reference click here
Issuing SSL for website - link for reference
This is my folder structure for deployment, simply zip all files and upload it on file manager of cyber panel, and extract out your files. You can see, I have dist folder which contains all javascript files and also have index.js, the main startup file.
Click on fix permissions on file manager.
Go to Web terminal and install node modules. how ?
on web terminal :- type cd .. and press enter.
There you have to find out your project from directory, You can use ls command to get list of files and folder structure.
mine directory was (after using cd ..) :- cd home/FOLDERNAME/public_html
At last run your project through terminal, to check its working.
Config your vhost config file, below is reference image
File you have to add in vhost config, I also had provided you above.
If you domain is setup correctly, you can view on api on your domain else you can click on preview button on cyber panel
Note :- Always Run code in terminal first to check its working.
I would like to insert data into a SQlite3 db by pressing a button from an HTML file.
In order to achieve this, I wrote a JS script.
Unfortunately, when I press the button, I get this error message in my console.log:
script.js:5 Uncaught ReferenceError: require is not defined
Then, I tried to convert my JS file with browserify but then I got this error:
Cannot read property '_handle' of undefined
Here my HTML and JS codes to reproduce the error:
HTML:
<head>
</head>
<body>
<div>
<label>SQLite3</label>
<button type="button">Connection</button>
</div>
<script src="script.js"></script>
</body>
JS:
function addData() {
const sqlite3 = require('sqlite3').verbose();
let db = new sqlite3.Database('./data.db');
db.run('INSERT INTO info (result) VALUES (10)', function(err, row) {
if(err) {
console.log(err.message);
}
console.log("entry added to table");
});
}
addData();
Browserify works around the problem that browsers don't have native support for the Node.js module system.
Browserify does not work around most other APIs that are provided but Node.js but not browsers. For example, Node.js has the fs module which allows you to access the file system of the computer the code is running on. Browsers, on the other hand, don't allow access except in very particular and limited ways.
Since new sqlite3.Database('./data.db') tries to read data from a file, it will not work in a browser.
Use a different API that is supported by browsers instead (such as IndexedDB or Web Storage.
Alternatively, if you want to share data between browsers, use Node.js to run a web server (e.g. with Express.js) and write a web service through which the database can be accessed.
You can't connect to sqlite databawe from client side you have to connect from server side language. Perhaps you can use NodeJS as server side programming language.
follow those steps then it will work
STEP1
Download and install node js from https://nodejs.org/en/download/
STEP2
Install npm by folloy this instruction
https://www.npmjs.com/get-npm
STEP3
Create Node js project by following this guides http://cassandrawilcox.me/setting-up-a-node-js-project-with-npm/
STEP4
Now you can install sqlite3 via npm.
After that you have to run server. If you are beginner then follow this
https://www.w3schools.com/nodejs/
I'm following an udemy course on Meteor.
Steps to replicate my problem:
1) On CMD:
meteor create Leaderboard
cd Leaderboard
meteor npm install
meteor run
(server starts, localhost:3000)
2) Then, I deleted the contents of main.css, main.html & main.js (under client folder).
3) Opened main.js and added the following line:
PlayersList = new Mongo.Collection('players');
On Chrome's console I typed 'PlayersList' and got the following:
M…o.Collection {_transform: null, _connection: Connection, _collection: LocalCollection, _name: "players", _driver: LocalCollectionDriver…}
THE PROBLEM
When I type this on console:
PlayersList.insert({ name: 'David', score: 0 });
This is the Error:
"eebRFhA9vbSfHzPKk"
meteor.js?hash=e3f53db…:930 insert failed: Method '/players/insert' not found
Why am I getting it? I followed the exact steps provided by the instructor. What's wrong here?
That error is caused by the collection not having been defined on the server, only on the client.
The default app created by meteor create app contains two main.js files, one in the client and one in server folder. These specially-named folders work exactly as you'd expect - the content in them is only loaded on the client or server. Apparently you added the collection definition only to the one in client. To fix this, if you put a file outside these specially-named folders - say create a folder named collections, and add a PlayersList.js file there and define your collection there, then it will be loaded by both and work.
Alternatively (this is the recommended method when developing a larger app) if you put the file that defines the collection into a folder named imports then you can import that to your server and client code separately, instead of Meteor auto-including it. You can read more about Meteor application structure here.
Try this :-
PlayersList._collection.insert({ name: 'David', score: 0 });
I have a solution which need to connect using CORS to a signalr exposed service.
The address where the signalr service will be hosted could change in time, so it's not
suitable to have the classic script tag
<script src="http://server:8888/signalr/hubs" type="text/javascript"></script>
but it would be fantastic if there's a way to reference the above url dynamically by javascript without the static script tag.
Suggestions would be great!
Do the following in your JS file:
$.getScript('http://server:8888/signalr/hubs', function () {
//Set the hubs URL for the connection
$.connection.hub.url = 'http://server:8888/signalr';
var hub = $.connection.yourHub; //yourHub is name of hub on the server side
//wire up SignalR
//start hub
$.connection.hub.start().done(function () {
//once we're done with SignalR init we can wire up our other stuff
});
});
You could put your settings in a config file:
config.json:
{
"signalr_url": "http://server:8888/signalr"
}
Then load the config:
$.getJSON('config.json', function(config) {
$.getScript(config.signalr_url, function() {
// when the script has loaded
});
});
Edit:
After looking at the SignalR documentation, I think the following would be more suitable.
First include the needed scripts:
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.signalR.min.js" type="text/javascript"></script>
Now you can just call $.connection(...); with any url. So applying the above it could look like this:
$.getJSON('config.json', function(config) {
$.connection(config.signalr_url);
});
I have this same scenario and after some researchs we've decided to put the generated proxy as a physical script like bellow:
How to create a physical file for the SignalR generated proxy
As an alternative to the dynamically generated proxy, you can create a
physical file that has the proxy code and reference that file. You
might want to do that for control over caching or bundling behavior,
or to get IntelliSense when you are coding calls to server methods.
To create a proxy file, perform the following steps:
Install the Microsoft.AspNet.SignalR.Utils NuGet package.
Open a command prompt and browse to the tools folder that contains the
SignalR.exe file. The tools folder is at the following location:
[your solution
folder]\packages\Microsoft.AspNet.SignalR.Utils.2.1.0\tools
Enter the following command:
signalr ghp /path:[path to the .dll that contains your Hub class]
The path to your .dll is typically the bin folder in your project
folder.
This command creates a file named server.js in the same folder as
signalr.exe.
Put the server.js file in an appropriate folder in your project,
rename it as appropriate for your application, and add a reference to
it in place of the "signalr/hubs" reference.
link: How to create a physical file for the SignalR generated proxy
As long we have proxy then you can just refer to the Hub url like this:
$.connection.hub.url = "http://your-url/signalr;
//open connection
$.connection.hub.start()
.done(function () {
//do your stuff
})
.fail(function () { alert('unable to connect'); });