I'm working on a headless solution to give bots SSR, save the renderings on a firebase bucket. I've deployed a working Rendertron heroku app at https://xymba-renderbot.herokuapp.com/render/ .
This app works well enough with direct tests and on Google's mobile-friendly test. Serving local works, too from vue.config.js devServer proxy.
However, when I deploy the app to Vercel including the specified middleware in index.js, doesn't seem like I know how to test or the BOTS aren't config'd right (Heroku has the renderbot separately from the main app at Vercel)
To recap, I'm running Rendertron, need to learn how to send bots to the /render endpoint, and how to pipe the renderings as static files to be saved. Am I missing something or is this not possible from vue-cli?
index.js
const express = require('express');
const serveStatic = require('serve-static')
const path = require('path');
app = express();
const rendertron = require('rendertron-middleware');
const BOTS = rendertron.botUserAgents.concat('googlebot');
const BOT_UA_PATTERN = new RegExp(BOTS.join('|'), 'i');
app.use(serveStatic(path.join(__dirname, 'dist')));
app.use(rendertron.makeMiddleware({
proxyUrl: 'https://xymba-renderbot.herokuapp.com/render',
userAgentPattern: BOT_UA_PATTERN
}));
app.get('/service-worker.js', (req, res) => {
res.sendFile(path.resolve(__dirname, 'dist', 'service-worker.js'));
});
app.get('*', function (req, res) {
const index = path.join(__dirname, 'dist', 'index.html')
res.sendFile(index, path.join(__dirname, 'dist/'))
})
const port = process.env.PORT || 80;
app.listen(port);
vue.config.js
const path = require("path");
module.exports = {
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8085, // CHANGE YOUR PORT HERE!
https: true,
hotOnly: false,
proxy: {
"^/render/": {
target: "https://xymba-renderbot.herokuapp.com/",
pathRewrite: { "^/render/": "/render/" },
changeOrigin: true,
logLevel: "debug"
}
}
}
}
I have an application in Vue and a node server where I connect in real time with socket-io 3.1.0, the problem is that the first time I connect to the server from the client, it does not trigger the "connect" event get the socket.id. On the other hand, if I update the page, it already works ... I don't understand what happens.
Client vue, main.js:
const app = createApp(App)
.use(IonicVue)
.use(VueAxios, axios)
.use(store)
.use(router);
app.config.globalProperties.$soketio = io("https://app.xxxx.net", {
path: '/stomp',
secure: true,
});
In component:
mounted() {
this.$soketio.on('connect', (data) => {
console.log('.....')
});
}
Server:
const port = 3000;
const server = app.listen(port, () => {
console.log("Escuchando el puerto: " + port);
});
var path = "/stomp";
const io = require("socket.io")(server, {
cors: {
origin: "*",
methods: ["GET", "POST"],
credentials: true,
},
path: path,
});
global.io = io;
..........
I'm build vue app, and for mine app need api request to server from client, also necessary proxy any request.
It's mine vue.config.js
const producer = require('./src/kafka/producer');
const bodyParser = require('body-parser')
module.exports = {
devServer: {
setup: function (app, server) {
app.use(bodyParser.json())
app.post('/send-message', function (req, res) {
producer.send(req.body)
.then(() => {
res.json({result: true, error: null});
})
.catch((e) => {
res.status(500).json({result: false, error: e});
})
});
},
proxy: {
'/v2/order/by-number': {
target: 'http://address-here'
}
}
}
};
As you can see so i'm use body-parser app.use(bodyParser.json())
After I added it, proxying stopped working for me. Request to /send-message freezes after show me error
Proxy error: Could not proxy request path-here from localhost:8080
to http://address-here
Internet searches have not led to a solution.
For a long time, i find a solution:
Add second param jsonParser to app.post()
See full example
const producer = require('./src/kafka/producer');
const bodyParser = require('body-parser')
const jsonParser = bodyParser.json({limit: '1mb'});
module.exports = {
devServer: {
setup: function (app, server) {
app.post('/send-message', jsonParser, function (req, res) {
producer.send(req.body)
.then(() => {
res.json({result: true, error: null});
})
.catch((e) => {
res.status(500).json({result: false, error: e});
})
});
},
proxy: {
'path': {
target: 'http://address-here'
}
}
}
};
I have made an application following a tutorial using peerjs. Everything seems to be working fine except when I make a connection for a video call where I am using peerjs. I have made my own peerjs server which I am running on localhost (right now for testing). Here is the code for the peer server:
const express = require('express');
const path = require('path');
const http = require('http');
const cors = require('cors');
const errorhandler = require('errorhandler');
var ExpressPeerServer = require('peer').ExpressPeerServer;
var options = {
debug: true,
key: 'copycat'
};
var app = express();
var server = http.createServer(app);
var port = process.env.PORT || '3001';
app.set('port', port);
app.use(cors());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/peerjs', ExpressPeerServer(server, options));
app.use(errorhandler());
process.on('uncaughtException', function(exc) {
console.error(exc);
});
server.listen(port);
As you can see I am running the app on port 3001. Now following is the script for peerjs connection for a video call:
// PeerJS
// Compatibility shim
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// PeerJS object
var peer = new Peer(username + roomId, {
host: 'localhost',
path: '/peerjs',
port: 443,
secure: true,
key: 'copycat',
debug: true
});
peer.on('open', function () {
$('#my-id').text(peer.id);
});
// Receiving a call
peer.on('call', function (call) {
// Answer the call automatically (instead of prompting user) for demo purposes
call.answer(window.localStream);
step3(call);
});
peer.on('error', function (err) {
alert(err.message);
// Return to step 2 if error occurs
step2();
});
// Click handlers setup
$(function () {
$('#make-call').click(function () {
// Initiate a call!
var call = peer.call($('#callto-id').val(), window.localStream);
step3(call);
});
$('#end-call').click(function () {
window.existingCall.close();
step2();
});
step1();
});
function step1() {
// Get audio/video stream
navigator.getUserMedia({ audio: true, video: true }, function (stream) {
// Set your video displays
$('#my-video').prop('src', URL.createObjectURL(stream));
window.localStream = stream;
step2();
}, function () { $('#step1-error').show(); });
}
function step2() {
$('#step1, #step3').hide();
$('#step2').show();
}
function step3(call) {
// Hang up on an existing call if present
if (window.existingCall) {
window.existingCall.close();
}
// Wait for stream on the call, then set peer video display
call.on('stream', function (stream) {
$('#second-video').prop('src', URL.createObjectURL(stream));
});
// UI stuff
window.existingCall = call;
$('#second-id').text(call.peer);
call.on('close', step2);
$('#step1, #step2').hide();
$('#step3').show();
}
This is pretty much the example code from peerjs example file on github. What I am confused about is the port value. Inside the options in the above script its port 443. I get the following error in chrome when I try to make a video call:
peer.js:1492 WebSocket connection to 'wss://localhost/peerjs/peerjs?key=peerjs&id=User80925be509c6c606fa21409858f5&token=zz69b3ccyk' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
Socket._startWebSocket # peer.js:1492
Socket.start # peer.js:1481
Peer._initialize # peer.js:1058
Peer # peer.js:962
(anonymous) # 5be509c6c606fa21409858f5:183
peer.js:1741 PeerJS: Socket closed.
peer.js:1741 PeerJS: ERROR Error: Lost connection to server.
peer.js:1555 POST https://localhost/peerjs/peerjs/User80925be509c6c606fa21409858f5/zz69b3ccyk/id?i=0 net::ERR_CONNECTION_REFUSED
Socket._startXhrStream # peer.js:1555
Socket.start # peer.js:1480
Peer._initialize # peer.js:1058
Peer # peer.js:962
(anonymous) # 5be509c6c606fa21409858f5:183
peer.js:1741 PeerJS: ERROR Error: Lost connection to server.
Please advise what am I doing wrong???
If you are using at your local end then use your localport i.e. 3001 else use 443
make object like this
var peer = new Peer(undefined, {
host: 'localhost',
path: '/peerjs',
port: 3001,
secure: true,
key: 'copycat',
debug: true
});
I'm trying to get socket.io running with my SSL certificate however, it will not connect.
I based my code off the chat example:
var https = require('https');
var fs = require('fs');
/**
* Bootstrap app.
*/
var sys = require('sys')
require.paths.unshift(__dirname + '/../../lib/');
/**
* Module dependencies.
*/
var express = require('express')
, stylus = require('stylus')
, nib = require('nib')
, sio = require('socket.io');
/**
* App.
*/
var privateKey = fs.readFileSync('../key').toString();
var certificate = fs.readFileSync('../crt').toString();
var ca = fs.readFileSync('../intermediate.crt').toString();
var app = express.createServer({key:privateKey,cert:certificate,ca:ca });
/**
* App configuration.
*/
...
/**
* App routes.
*/
app.get('/', function (req, res) {
res.render('index', { layout: false });
});
/**
* App listen.
*/
app.listen(443, function () {
var addr = app.address();
console.log(' app listening on http://' + addr.address + ':' + addr.port);
});
/**
* Socket.IO server (single process only)
*/
var io = sio.listen(app,{key:privateKey,cert:certificate,ca:ca});
...
If I remove the SSL code it runs fine, however with it I get a request to http://domain.example/socket.io/1/?t=1309967919512
Note it's not trying HTTPS, which causes it to fail.
I'm testing on chrome, since it is the target browser for this application.
I apologize if this is a simple question, I'm a node/socket.io newbie.
Use a secure URL for your initial connection, i.e. instead of "http://" use "https://". If the WebSocket transport is chosen, then Socket.IO should automatically use "wss://" (SSL) for the WebSocket connection too.
Update:
You can also try creating the connection using the 'secure' option:
var socket = io.connect('https://localhost', {secure: true});
The following is how I set up to set it up with express:
var app = require('express')();
var https = require('https');
var fs = require( 'fs' );
var io = require('socket.io')(server);
var options = {
key: fs.readFileSync('./test_key.key'),
cert: fs.readFileSync('./test_cert.crt'),
ca: fs.readFileSync('./test_ca.crt'),
requestCert: false,
rejectUnauthorized: false
}
var server = https.createServer(options, app);
server.listen(8080);
io.sockets.on('connection', function (socket) {
// code goes here...
});
app.get("/", function(request, response){
// code goes here...
})
Update : for those using lets encrypt use this
var server = https.createServer({
key: fs.readFileSync('privkey.pem'),
cert: fs.readFileSync('fullchain.pem')
}, app);
On the same note, if your server supports both http and https you can connect using:
var socket = io.connect('//localhost');
to auto detect the browser scheme and connect using http/https accordingly. when in https, the transport will be secured by default, as connecting using
var socket = io.connect('https://localhost');
will use secure web sockets - wss:// (the {secure: true} is redundant).
for more information on how to serve both http and https easily using the same node server check out this answer.
If your server certificated file is not trusted, (for example, you may generate the keystore by yourself with keytool command in java), you should add the extra option rejectUnauthorized
var socket = io.connect('https://localhost', {rejectUnauthorized: false});
Depending on your needs, you could allow both secure and unsecure connections and still only use one Socket.io instance.
You simply have to instanciate two servers, one for HTTP and one for HTTPS, then attach those servers to the Socket.io instance.
Server side :
// needed to read certificates from disk
const fs = require( "fs" );
// Servers with and without SSL
const http = require( "http" )
const https = require( "https" );
const httpPort = 3333;
const httpsPort = 3334;
const httpServer = http.createServer();
const httpsServer = https.createServer({
"key" : fs.readFileSync( "yourcert.key" ),
"cert": fs.readFileSync( "yourcert.crt" ),
"ca" : fs.readFileSync( "yourca.crt" )
});
httpServer.listen( httpPort, function() {
console.log( `Listening HTTP on ${httpPort}` );
});
httpsServer.listen( httpsPort, function() {
console.log( `Listening HTTPS on ${httpsPort}` );
});
// Socket.io
const ioServer = require( "socket.io" );
const io = new ioServer();
io.attach( httpServer );
io.attach( httpsServer );
io.on( "connection", function( socket ) {
console.log( "user connected" );
// ... your code
});
Client side :
var url = "//example.com:" + ( window.location.protocol == "https:" ? "3334" : "3333" );
var socket = io( url, {
// set to false only if you use self-signed certificate !
"rejectUnauthorized": true
});
socket.on( "connect", function( e ) {
console.log( "connect", e );
});
If your NodeJS server is different from your Web server, you will maybe need to set some CORS headers. So in the server side, replace:
const httpServer = http.createServer();
const httpsServer = https.createServer({
"key" : fs.readFileSync( "yourcert.key" ),
"cert": fs.readFileSync( "yourcert.crt" ),
"ca" : fs.readFileSync( "yourca.crt" )
});
With:
const CORS_fn = (req, res) => {
res.setHeader( "Access-Control-Allow-Origin" , "*" );
res.setHeader( "Access-Control-Allow-Credentials", "true" );
res.setHeader( "Access-Control-Allow-Methods" , "*" );
res.setHeader( "Access-Control-Allow-Headers" , "*" );
if ( req.method === "OPTIONS" ) {
res.writeHead(200);
res.end();
return;
}
};
const httpServer = http.createServer( CORS_fn );
const httpsServer = https.createServer({
"key" : fs.readFileSync( "yourcert.key" ),
"cert": fs.readFileSync( "yourcert.crt" ),
"ca" : fs.readFileSync( "yourca.crt" )
}, CORS_fn );
And of course add/remove headers and set the values of the headers according to your needs.
check this.configuration..
app = module.exports = express();
var httpsOptions = { key: fs.readFileSync('certificates/server.key'), cert: fs.readFileSync('certificates/final.crt') };
var secureServer = require('https').createServer(httpsOptions, app);
io = module.exports = require('socket.io').listen(secureServer,{pingTimeout: 7000, pingInterval: 10000});
io.set("transports", ["xhr-polling","websocket","polling", "htmlfile"]);
secureServer.listen(3000);
Server-side:
import http from 'http';
import https from 'https';
import SocketIO, { Socket } from 'socket.io';
import fs from 'fs';
import path from 'path';
import { logger } from '../../utils';
const port: number = 3001;
const server: https.Server = https.createServer(
{
cert: fs.readFileSync(path.resolve(__dirname, '../../../ssl/cert.pem')),
key: fs.readFileSync(path.resolve(__dirname, '../../../ssl/key.pem'))
},
(req: http.IncomingMessage, res: http.ServerResponse) => {
logger.info(`request.url: ${req.url}`);
let filePath = '.' + req.url;
if (filePath === './') {
filePath = path.resolve(__dirname, './index.html');
}
const extname = String(path.extname(filePath)).toLowerCase();
const mimeTypes = {
'.html': 'text/html',
'.js': 'text/javascript',
'.json': 'application/json'
};
const contentType = mimeTypes[extname] || 'application/octet-stream';
fs.readFile(filePath, (error: NodeJS.ErrnoException, content: Buffer) => {
if (error) {
res.writeHead(500);
return res.end(error.message);
}
res.writeHead(200, { 'Content-Type': contentType });
res.end(content, 'utf-8');
});
}
);
const io: SocketIO.Server = SocketIO(server);
io.on('connection', (socket: Socket) => {
socket.emit('news', { hello: 'world' });
socket.on('updateTemplate', data => {
logger.info(data);
socket.emit('updateTemplate', { random: data });
});
});
server.listen(port, () => {
logger.info(`Https server is listening on https://localhost:${port}`);
});
Client-side:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Websocket Secure Connection</title>
</head>
<body>
<div>
<button id='btn'>Send Message</button>
<ul id='messages'></ul>
</div>
<script src='../../../node_modules/socket.io-client/dist/socket.io.js'></script>
<script>
window.onload = function onload() {
const socket = io('https://localhost:3001');
socket.on('news', function (data) {
console.log(data);
});
socket.on('updateTemplate', function onUpdateTemplate(data) {
console.log(data)
createMessage(JSON.stringify(data));
});
const $btn = document.getElementById('btn');
const $messages = document.getElementById('messages');
function sendMessage() {
socket.emit('updateTemplate', Math.random());
}
function createMessage(msg) {
const $li = document.createElement('li');
$li.textContent = msg;
$messages.appendChild($li);
}
$btn.addEventListener('click', sendMessage);
}
</script>
</body>
</html>
For enterprise applications it should be noted that you should not be handling https in your code. It should be auto upgraded via IIS or nginx. The app shouldn't know about what protocols are used.
In case someone need a shorter form
var fs = require('fs');
var https = require('https');
var express = require('express');
var app = express();
var options = {
key: fs.readFileSync('/path-to/ssl.key'),
cert: fs.readFileSync('/path-to/ssl.cert')
};
var server = https.createServer(options, app);
var io = require('socket.io')(server);
This is my nginx config file and iosocket code. Server(express) is listening on port 9191. It works well:
nginx config file:
server {
listen 443 ssl;
server_name localhost;
root /usr/share/nginx/html/rdist;
location /user/ {
proxy_pass http://localhost:9191;
}
location /api/ {
proxy_pass http://localhost:9191;
}
location /auth/ {
proxy_pass http://localhost:9191;
}
location / {
index index.html index.htm;
if (!-e $request_filename){
rewrite ^(.*)$ /index.html break;
}
}
location /socket.io/ {
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://localhost:9191/socket.io/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
ssl_certificate /etc/nginx/conf.d/sslcert/xxx.pem;
ssl_certificate_key /etc/nginx/conf.d/sslcert/xxx.key;
}
Server:
const server = require('http').Server(app)
const io = require('socket.io')(server)
io.on('connection', (socket) => {
handleUserConnect(socket)
socket.on("disconnect", () => {
handleUserDisConnect(socket)
});
})
server.listen(9191, function () {
console.log('Server listening on port 9191')
})
Client(react):
const socket = io.connect('', { secure: true, query: `userId=${this.props.user._id}` })
socket.on('notifications', data => {
console.log('Get messages from back end:', data)
this.props.mergeNotifications(data)
})
I needed to get this to work with Debian 10, ISPConfig 3 and Let's Encrypt. Took me a while to work out the specifics. Maybe this saves someone else some time…
Server-side:
const fs = require('fs');
const https = require('https');
const express = require('express');
const socketio = require('socket.io');
const app = express();
const https_options = {
key: fs.readFileSync('/var/www/clients/client1/web1/ssl/your-domain.com-le.key'),
cert: fs.readFileSync('/var/www/clients/client1/web1/ssl/your-domain.com-le.crt'),
ca: fs.readFileSync('/root/.acme.sh/your-domain.example/fullchain.cer'),
requestCert: false,
rejectUnauthorized: false
}
const server = https.createServer(https_options, app);
server.listen(3000, () => {
console.log('server started ok');
});
const io = socketio(server, {
cors: {
origin: "https://your-domain.example",
},
secure: true
});
io.on('connection', (sock) => {
console.log('someone connected');
}
Client-side:
const sock = io('https://your-domain.example:3000/');
sock.on('status', (text) => {
add_text($('#status'), text);
});
Server side:
var ssl_options = {
ca: [fs.readFileSync('../ssl/cert1.crt'), fs.readFileSync('../ssl/cert2.crt'), fs.readFileSync('../ssl/cert3.crt')],
key: fs.readFileSync('../ssl/xxx.key'),
cert: fs.readFileSync('../ssl/xxx.example.crt'),
};
var wssServer = https.createServer(ssl_options,app); // Express app
wssServer.listen(4433, '0.0.0.0');
global.io = require("socket.io")();
io.listen(wssServer);
io.on( "connection", function( socket ) {
console.log( "user connected" );
});
Client-side (no luck with the built-in WebSocket API):
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.js"></script>
<script>
const socket = io("https://xxx.example:4433",{ transports: ['websocket', 'polling', 'flashsocket'] });
</script>