Where is the socket.io client library? - node.js

As far as I have seen, there is no explanation as to where we are to locate the client side script for socket.io if node.js is not used as the web server. I've found a whole directory of client side files, but I need them in a combined version (like it's served when using node.js webs servers). Any ideas?

The best way I have found to do this is to use bower.
bower install socket.io-client --save
and include the following in your app's HTML:
<script src="/bower_components/socket.io-client/socket.io.js"></script>
That way you can treat the socket.io part of your client the same way you treat any other managed package.

socket.io.js is what you're going to put into your client-side html. Something like:
<script type="text/javascript" src="socket.io.js"></script>
my script is located:
/usr/local/lib/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js
copy that file to where you want your server to serve it.

I think that better and proper way is to load it from this url
src="/socket.io/socket.io.js"
on the domain where socket.io runs. What is positive on this solution is that if you update your socket.io npm module, your client file gets updated too and you don't have to copy it every time manually.

I used bower as suggested in Matt Way's answer, and that worked great, but then the library itself didn't have its own bower.json file.
This meant that the bower-main-files Gulp plugin that I'm using to find my dependencies' JS files did not pull in socket.io, and I was getting an error on page load. Adding an override to my project's bower.json worked around the issue.
First install the library with bower:
bower install socket.io-client --save
Then add the override to your project's bower.json:
"overrides": {
"socket.io-client": {
"main": ["socket.io.js"]
}
}

For everyone who runs wiredep and gets the "socket.io-client was not injected in your file." error:
Modify your wiredep task like this:
wiredep: {
..
main: {
..
overrides: {
'socket.io-client': {
main: 'socket.io.js'
}
}
}

If you are using bower.json, add the socket.io-client dependency.
"socket.io-client": "0.9.x"
Then run bower install to download socket.io-client.
Then add the script tag in your HTML.
<script src="bower_components/socket.io-client/dist/socket.io.min.js"></script>

I have created a bower compatible socket.io-client that can be install like this :
bower install sio-client --save
or for development usage :
bower install sio-client --save-dev
link to repo

if you use https://github.com/btford/angular-socket-io
make sure to have your index.html like this:
<!-- https://raw.githubusercontent.com/socketio/socket.io-client/master/socket.io.js -->
<script src="socket.io.js"></script>
<!-- build:js({client,node_modules}) app/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- ...... -->
<script src="bower_components/angular-socket-io/socket.js"></script>
<!-- endbower -->
<!-- endbuild -->
<script type="text/javascript" charset="utf-8">
angular.module('myapp', [
// ...
'btford.socket-io'
]);
// do your angular/socket stuff
</script>

Related

How to use the swagger-ui npm module with an existing OpenAPI specification file

Looking at the documentation for installing Swagger-UI one can see that two official npm modules are being published: swagger-ui and swagger-ui-dist. However, I really struggle to figure out how these are supposed to be used with an already existing OpenApi 3.0 specification.
The only thing I need is a simple web application (plain node.js or express.js or whatever works) which will serve my existing specification.yml document embedded into the plain Swagger-UI files on a path like /docs.
Since this needs to be done in a repeatable manner (will run in a Docker container in the end), manual editing of files is not desired in the process.
The closest I could get was downloading a release tar ball, extracting the dist folder, use tools like sed to replace the default specification file with my own one and finally host this on a webserver like nginx.
However, this looks unnecessary complex to me and makes me wonder what the npm modules are supposed to be used for.
Finally I found two approaches to achieve my goal as outlined in the question.
Using unpkg
unpkg is an automated content delivery network for all modules that are published on the npm registry. It allows to include and use any npm module in a static HTML file without any complex package managers, dependency resolvers etc. This is especially great if you don't have any other need to use the npm ecosystem directly.
For swagger-ui, such an HTML file would look like this. Note that we are importing the swagger-ui-dist package which already includes all necessary dependencies.
<!DOCTYPE html>
<!--Inspired by https://gist.github.com/buzztaiki/e243ccc3203f96777e2e8141d4993664-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist#3/swagger-ui.css" >
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist#3/swagger-ui-bundle.js"> </script>
<script type="text/javascript">
window.onload = function() {
// Swagger-ui configuration goes here.
// See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
SwaggerUIBundle({
deepLinking: true,
dom_id: '#swagger-ui',
showExtensions: true,
showCommonExtensions: true,
url: specification.json // <-- adjust this to your webserver's structure
});
};
</script>
</body>
</html>
Host this HTML file on your webserver and your all settled.
Using browserify / webpack
browserify and webpack are module bundlers from the npm ecosystem that can collect an npm module and all its dependencies, then bundle them up in one single js file. This file can then be loaded and used in an HTML page.
While both tools might differ feature-wise in the details, for this job both of them work almost in the same way. The following example uses browserify, however, the general approach with webpack is the same.
First, install browserify globally:
npm install -g browserify
Then, install the swagger-ui module locally in your current folder:
npm install --save swagger-ui
Finally, bundle the swagger-ui module and all of its dependencies into a single output file:
browserify --require swagger-ui -o bundle.js
The according HTML page to include it could look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./node_modules/swagger-ui/dist/swagger-ui.css">
<title>Swagger-UI</title>
</head>
<body>
<div id="swagger-ui"></div>
</body>
<script type="text/javascript" src="./bundle.js"></script>
<script type="text/javascript">
window.onload = function() {
// Swagger-ui configuration goes here.
// See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
SwaggerUI({
deepLinking: true,
dom_id: '#swagger-ui',
showExtensions: true,
showCommonExtensions: true,
url: specification.json // <-- adjust this to your webserver's structure
});
};
</script>
</html>
This approach might be preferred if you are using browserify or webpack within your ecosystem for other tasks anyway.
If you are looking for whatever works the easiest solution will be to use an existing swagger-ui like the demo store and pass your spec in the url param:
http://petstore.swagger.io/?url=https://raw.githack.com/heldersepu/hs-scripts/master/swagger/4411/7.json
If you want more of a standalone solution copy the swagger-ui dist directory to your deployment:
https://github.com/swagger-api/swagger-ui/tree/master/dist
then tweak the index.html to suit your needs

Minify nodejs templates real time

I am building a nodejs app using Handlebars as my template engine. I have a template like this one (template.hbs):
<html>
<head></head>
<body>
{{ my_var }}
</body>
</html>
I wonder if I can work (write code) with this file while using on node a minified version ( that will be compiled and delivered for the user ) like this (minified_template.hbs):
<html><head></head><body>{{ my_var }}</body></html>
I mean, I would like some program to be running all time, watching for changes on "template.hbs" and generating "minified_template.hbs". This way I can save bandwidth and money. Is there such a program that can do it? I've heard of Webpack but after searching on google I am still no sure it can do this kind of job.
Thanks in advance.
I have found the answer to my question. It's name is "Gulp":
Install nodejs, then run on commandline:
npm install -g gulp
npm install --save-dev gulp-minify-html
create a file named "gulpfile.js" as:
var gulp = require('gulp');
var minifyHtml = require("gulp-minify-html");
gulp.task('minify-views', function () {
gulp.src('./views/*.html')
.pipe(minifyHtml())
.pipe(gulp.dest('./views_minified'));
});
gulp.task('watch-views', function () {
gulp.src('./views/*.html')
.pipe(minifyHtml())
.pipe(gulp.dest('./views_minified'));
gulp.watch(["./views/*.html"],['minify-views']);
});
Then, from commandline, run:
gulp watch-views
When anny file under the "views" folder is modified, it gets minified by gulp and saved with tha same name to the folder named "views_minified".

how to use adapter.js of webRTC-adapter?

I am writing a WebRTC application and have the following problem:
I want to use the adapter.js library.
I have the following index.html:
<html>
<header>
<script src='../out/adapter.js'></script>
<script src='../out/main.js'></script>
</header>
<body>
<video id="localVideo" width='500' autoplay></video>
</body>
</html>
and my main.js looks like:
var adapter=require('webrtc-adapter');
var localVideo=document.querySelector('video#localVideo');
navigator.getUserMedia(media_constraints, handleUserMedia, handleUserMediaError);
function handleUserMedia(stream) {
localStream = stream;
adapter.attachMediaStream(localVideo, stream);
console.log('Adding local stream.');
}
but my browser logs the error: Uncaught ReferenceError: require is not defined
require is used (and defined) in Node.js environments to load modules. (Not exclusively, for more information check here).
If you downloaded an adapter.js version from here and include it the way you do (via script tags), you can simple delete the require(...) line and you should be good to go.
Edit: added an example
console.log(adapter.browserDetails.browser);
<script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
if you have checked installing adapter js?
check
npm webrtc-adapter --version
if not showing up in node, install it to your app
npm install --save webrtc-adapter

Installing CKEditor with npm

I am trying to install CKEditor in my project. I am using Laravel.
I know I could download the files but I like making my life difficult and I decided that I want to install CKEditor as a npm dependency.
As stated in their documentation here, I added the package to package.json, like this:
"dependencies": {
"jquery": "^1.11.1",
"bootstrap-sass": "^3.0.0",
"elixir-coffeeify": "^1.0.3",
"laravel-elixir": "^4.0.0",
"font-awesome": "^4.5.0",
"ckeditor": "^4.5.7"
}
Now I guess I have to require it in my app.coffee, and so I tried:
window.$ = window.jQuery = require('jquery')
require('bootstrap-sass')
require('ckeditor')
This surely adds the ckeditor.js script to my app.js. However ckeditor seems to have its own dependencies such as config.js or editor.css, and of course the server responds with 404 for those requests.
How could I install CKeditor this way?
Thank you!
There is probably a problem with paths to those CKEditor dependencies. I'm not sure if you are using browserify or something different but for example in browserify using require('ckeditor') will result in ckeditor.js (bundled probably with other js files) file loading from same dir as your app.coffee file while CKEditor dependencies are in node_modules/ckeditor/ dir.
To tell CKEditor from which directory it should load its dependency you may use CKEDITOR_BASEPATH:
window.CKEDITOR_BASEPATH = 'node_modules/ckeditor/'
require('ckeditor')
You may see if there is a problem with loading those files using Network tab in Dev console (e.g. F12 in Chrome).
Note that it's not ideal solution for production environment because then you need node_modules folder on your server. You should probably consider moving only those dependencies to other folder during building/releasing process (and use CKEDITOR_BASEPATH as before with path to this production folder).
Open the resources/js/app.js file
Add the following line:
window.ClassicEditor = require('#ckeditor/ckeditor5-build-classic');
Then execute the Laravel Mix command
npm run dev
HTML JS:
<html lang="es">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Classic editor</title>
<script src="[path]/public/app.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>

Meteor, npm, and request

I'm using meteor and I ran npm install request to get access to that library. Everything seems to install correctly but when I run the meteor server, I then get the following error. Is there any word on why this is or how to solve it? Thanks.
While building the application:
node_modules/request/node_modules/node-uuid/test/test.html:1: bad formatting in HTML template
node_modules/request/node_modules/form-data/node_modules/combined-stream/node_modules/delayed-stream/test/run.js:1:15: Unexpected token ILLEGAL
node_modules/request/node_modules/form-data/node_modules/combined-stream/test/run.js:1:15: Unexpected token ILLEGAL
For reference:
test.html
<html>
<head>
<style>
div {
font-family: monospace;
font-size: 8pt;
}
div.log {color: #444;}
div.warn {color: #550;}
div.error {color: #800; font-weight: bold;}
</style>
<script src="../uuid.js"></script>
</head>
<body>
<script src="./test.js"></script>
</body>
</html>
run.js (same)
#!/usr/bin/env node
var far = require('far').create();
far.add(__dirname);
far.include(/test-.*\.js$/);
far.execute();
Meteor constructs the entire DOM itself so it will typically reject any script tags included in the html (but it will include scripts in the head, thanks Andrew). It also only supports handlebars style templating (right now).
<html>
<head>
<title>Something</title>
</head>
<body>
{{>yourHandlebarsTemplate}}
</body>
</html>
My advice would be to have your js and css located as files inside the client folder under your projects root.
As for NPM request, you will not be able to:
install it normally like you do in most node projects, so node_module is out/npm install require is out
access the functions in it without a Npm.require
At this point you have two options: adding the package NPM from Atmosphere(unofficial package repository) and including request. Or try placing the lib into /packages/ and then using Npm.require('request').
Alternatively you can just use Meteor's built in HTTP package (meteor add http) which functions similar to request.
Remove from your template as it seems Meteor wants to create this tag for you when building the template. This should take care of the "bad formatting in HTML template" error in test.html.

Resources