I've followed multiple tutorials to set up socketio-jwt, but every time it seems that I'm not getting past this part:
Connected to SocketIO, Authenticating
Any ideas?
Client side:
<h1>Socket Connection Status: <span id="connection"></span></h1>
<script type="text/javascript">
$(document).ready(function () {
socketIOConnectionUpdate('Requesting JWT Token from Laravel');
$.ajax({
url: 'http://localhost:8000/token?id=1'
})
.fail(function (jqXHR, textStatus, errorThrown) {
socketIOConnectionUpdate('Something is wrong on ajax: ' + textStatus);
})
.done(function (result, textStatus, jqXHR) {
socketIOConnectionUpdate('Connected to SocketIO, Authenticating')
/*
make connection with localhost 3000
*/
var token = result.token;
var socket = io.connect('http://localhost:3000');
socket.on('connect', function () {
socket
.emit('authenticate', {token: token}) //send the jwt
.on('authenticated', function () {
console.log('authenticated');
socketIOConnectionUpdate('Authenticated');
})
.on('unauthorized', function(msg) {
socketIOConnectionUpdate('Unauthorized, error msg: ' + msg.message);
throw new Error(msg.data.type);
})
});
});
});
/*
Function for print connection message
*/
function socketIOConnectionUpdate(str) {
$('#connection').html(str);
}
Server side
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var socketioJwt = require('socketio-jwt');
var dotenv = require('dotenv').config({path:'../.env'});
var port = 3000;
io
.on('connection', socketioJwt.authorize({
secret: dotenv.JWT_SECRET,
timeout: 100 // 15 seconds to send the authentication message
}))
.on('authenticated', function(socket){
console.log('connected & authenticated: ' + JSON.stringify(socket.decoded_token));
socket.on('chat message', function(msg){
debugger;
io.emit('chat message', msg);
});
});
http.listen(port, function(){
console.log('listening on *:' + port);
});
You may have misunderstood how dotenv works, as you're trying to use it's return value.
Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.
From: dotenv github
Instead, it exports the variables stored in the file located at ../.env as environment variables, that become available as a part of process.env.
So instead of this:
var dotenv = require('dotenv').config({path:'../.env'});
socketioJwt.authorize({
secret: dotenv.JWT_SECRET,
timeout: 100
})
Do this
// do this near the entry point to your application!!
require('dotenv').config({path:'../.env'});
socketioJwt.authorize({
secret: process.env.JWT_SECRET,
timeout: 100
})
Related
Hi im trying to use passport for authencication, But im not sure what to do on the client side. I think the server side is fine, but it gives me this error:failed: WebSocket is closed before the connection is established. So it seems like it cant get the connection. what do i need to send from the client side, and do i need to change something on server side??
please heeeelp thanks:)
server.js
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require("socket.io")(server, {
cors: {
origin: "*",
methods: ["GET", "POST"]
}
});
var port = process.env.PORT || 4000;
const passportSocketIo = require('passport.socketio')
const cookieParser = require('cookie-parser')
const session = require("express-session")
const passport = require('passport')
io.use(passportSocketIo.authorize({
cookieParser: cookieParser,
key: 'express.sid',
secret: 'session_secret',
store: session,
success: onAuthorizeSuccess,
fail: onAuthorizeFail,
}));
function onAuthorizeSuccess(data, accept){
console.log('successful connection to socket.io');
// The accept-callback still allows us to decide whether to
// accept the connection or not.
accept(null, true);
// OR
// If you use socket.io#1.X the callback looks different
accept();
}
function onAuthorizeFail(data, message, error, accept){
if(error)
throw new Error(message);
console.log('failed connection to socket.io:', message);
// We use this callback to log all of our failed connections.
accept(null, false);
// OR
// If you use socket.io#1.X the callback looks different
// If you don't want to accept the connection
if(error)
accept(new Error(message));
// this error will be sent to the user as a special error-package
// see: http://socket.io/docs/client-api/#socket > error-object
}
io.on('connection', function (socket) {
console.log("connection")
var addedUser = false;
// when the client emits 'new message', this listens and executes
socket.on('new message', function (data) {
var data = validator.escape(data);
// we tell the client to execute 'new message'
socket.broadcast.emit('new message', {
username: socket.username,
message: data
});
db.serialize(function() {
// console.log('inserting message to database');
var insertMessageStr = "INSERT INTO messages (username, content, posted) VALUES ('" + socket.username + "','" + data.toString() + "'," + Date.now() + ");"
// console.log(insertMessageStr)
db.run(insertMessageStr);
});
});
client.js
const socket = io({
key: 'express.sid',
secret: 'session_secret',
});
I am writing server client application in node js.
Unfortunately Socket io connection is not being established.
My server side code is like this.
filename : MyServer.js
function MyServer(selectClient)
{
var express = require('express');
var bodyParser = require("body-parser");
this.app = express();
this.app.use(bodyParser.urlencoded({ extended: false }));
this.app.use(bodyParser.json());
var cookieParser = require('cookie-parser')
this.app.use(cookieParser())
if (undefined == selectClient)
{
selectClient = "default";
}
this.setStaticRoute("client/" + selectClient);
this.client = selectClient;
};
MyServer.prototype.setStaticRoute = function (staticPath)
{
var express = require('express');
var path = require('path');
this.app.use(express.static(staticPath));
};
MyServer.prototype.listen = function (portNumber)
{
this.server = this.app.listen(portNumber, '127.0.0.1', function ()
{
var MyServerSocketIo = require('MyServerSocketIo');
this.socketLink = new MyServerSocketIo(this.server,this.onDisconnect.bind(this),
this.onError.bind(this),this.onConnection.bind(this));
console.log("Inside listen function");
}.bind(this));
};
MyServer.prototype.onDisconnect = function()
{
console.log('On Socket IO Disconnect for MyServer');
};
MyServer.prototype.onError = function()
{
console.log('On Error');
};
MyServer.prototype.onConnection = function()
{
console.log('On Connection');
};
and MyServerSocketIo.js is like below
function MyServerSocketIo(server,onDisconnectCB,onErrorCB,onConnectionCB)
{
var SocketIo = require('socket.io');
this.onDisconnectCB = onDisconnectCB;
this.onErrorCB = onErrorCB;
this.onConnectionCB = onConnectionCB;
this.socket = null;
this.socketio = SocketIo(server);
this.socketio.on('connection',this.onConnection.bind(this));
};
MyServerSocketIo.prototype.onDisconnect = function ()
{
console.log('MyServer SocketIO Client Disconnected');
this.onDisconnectCB();
};
MyServerSocketIo.prototype.onError = function (error)
{
console.log('MyServer SocketIO Connection error' + error);
this.onErrorCB();
};
MyServerSocketIo.prototype.onConnection = function (socket)
{
console.log('MyServer SocketIO Connection with Client ID '+ socket.id + ' Established');
this.socket = socket;
socket.on('disconnect', this.onDisconnect.bind(this));
socket.on('error',this.onError.bind(this));
this.onConnectionCB();
};
Below is my client side code
filename: index.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>visual Display</title>
<link rel="preload" href="css/visual.css" as="style">
<link rel="stylesheet" href="css/visual.css">
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/MyClientSocketIo.js"></script>
<script type="text/javascript" src="js/display.js"></script>
<script type="text/javascript" charset="utf-8">
display = new Display();
function OnDisconnect()
{
display.showError();
}
function OnError()
{
display.showError();
}
clientSocket = io.connect('http://localhost:39198', {
transports: ['websocket'],
'forceNew': true,
rejectUnauthorized: false,
reconnection: true,
reconnectionDelay: 1000,
reconnectionDelayMax : 1000,
reconnectionAttempts: 99999
});
var socketClient = new MyClientSocketIo(clientSocket,OnDisconnect,OnError);
</script>
</head>
<body>
</body>
</html>
MyClientSocketIo.js file code is like below
function MyClientSocketIo(client,onDisconnectCB,onErrorCB)
{
this.onDisconnectCB = onDisconnectCB;
this.onErrorCB = onErrorCB;
this.client = client;
this.client.on('connect',this.onConnection.bind(this));
};
MyClientSocketIo.prototype.onDisconnect = function ()
{
console.log('MyClient Disconnected');
this.onDisconnectCB();
};
MyClientSocketIo.prototype.onError = function (error)
{
console.log('MyClient ' + this.client.id + ' encountered Error ' + error);
this.onErrorCB();
};
MyClientSocketIo.prototype.onConnection = function ()
{
console.log('MyClient ' + this.client.id + ' connected to MyServer over SocketIO !!');
this.client.on('disconnect', this.onDisconnect.bind(this));
this.client.on('error',this.onError.bind(this));
};
I could able to see server and client are getting started and below console log "Inside listen function" getting printed as well which is MyServer.prototype.listen function.
But socketIO connection b/w server and client is not getting established.
I could not see console log lines which are there inside MyServerSocketIo.prototype.onConnection function.
I am waiting 30seconds for socketio connection. If not established restarting the server and client and after restarting also socketio connection is not getting established.
This is my personal script of working chat. I have done code with nodejs, axios and socket.
You can do with this script also.
Backend Server
require("dotenv").config();
const port = process.env.SOCKET_PORT || 3000;
const main_server_url = process.env.SERVER_URL;
var express = require("express");
var app = express();
var server = app.listen(port);
var connectionOptions = {
"force new connection": true,
"reconnection": true,
"reconnectionDelay": 2000, //starts with 2 secs delay, then 4, 6, 8, until 60 where it stays forever until it reconnects
"reconnectionDelayMax": 60000, //1 minute maximum delay between connections
"reconnectionAttempts": "Infinity", //to prevent dead clients, having the user to having to manually reconnect after a server restart.
"timeout": 10000, //before connect_error and connect_timeout are emitted.
"transports": ["websocket"] //forces the transport to be only websocket. Server needs to be setup as well/
}
var io = require("socket.io").listen(server, connectionOptions);
var axios = require("axios");
var users = [];
var connections = [];
console.log("Server connected done");
io.sockets.on("connection", function (socket) {
var server_url = main_server_url;
console.log(server_url);
console.log(people);
connections.push(socket);
console.log("Connected : total connections are " + connections.length);
// rest of events of socket
});
Front End JS for load IO for client
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script type="text/javascript">
var base_url = YOUR_BASE_URL;
var port = YOUR_SOCKET_PORT;
var socket_port_url = base_url + ":" + port;
var socket = io(socket_port_url);
socket.on('done', (data) => {
console.log(data);
});
</script>
the issue that occurs here, is that, when i connect between sample socekt.io client with this socket.io server by node.js ( just running two terminals and opening socket connection between client and server)
I have no problems. But, when I am trying to inject this socket.io-client into my Ember.js application, precisely to ember-cli-mirage it redirects my client from given address : ( 'http: //localhost:8080') to something like http: //localhost:8080/socket.io/?EIO=3&transport=polling&.....
also Mirage displays me an error that I cannot handle, even by setting up precise namespace, routing the wsClient.connect() method or calling this.passthrough() , before calling wsClient.connect() .
I also paste the the screenshot of error from inspect console in browser:
error image
Do you have any idea how to resolve this problem? Thank you in advance and I also hope that the topic is not duplicated.
// server.js
var app = require('http').createServer(handler);
var io = require('socket.io')(app);
app.listen(8080);
function handler(req, res) {
res.writeHead(200);
res.end('default.index');
}
var rooms = {
'room1': [
],
'room2': [
]
};
io.on('connection', function(socket) {
console.log('client connected');
socket.on('join', function(roomName) {
rooms[roomName].push(socket.id);
socket.join(roomName);
});
socket.on('leave', function(roomName) {
var toRemove = rooms[roomName].indexOf(socket.id);
rooms[roomName].splice(toRemove, 1);
socket.leave('roomName');
});
socket.on('eNotification', function(data) {
console.log(data);
io.to(socket.id).emit('eNotificationCall', data);
io.to('room2').emit('eventNotification', data);
});
socket.on('gNotification', function(data) {
console.log(data);
io.to(socket.id).emit('gNotificationCall', data);
io.to('room1').emit('diagram1Notification', data);
});
socket.on('close', function() {
console.log('client disconnected');
});
});
//client.js
var wsClient = {
socket: null,
connect: function() {
this.socket = io.connect('http://localhost:8080');
this.socket.on('connect', function() {
console.log('mirage client connected!');
});
},
send: function(eventData, graphData) {
this.socket.emit('eNotification', eventData);
this.socket.emit('gNotification', graphData);
}
};
export default wsClient;
//config.js
import wsClient from './websockets/client';
export default function() {
wsClient.connect();
console.log(wsClient.socket);
var graphData = {X: "2", Y: "3"};
var eventData = {myDAta: 'myDAta', message: 'message'};
setInterval(function() {
wsClient.send(graphData, eventData);
}, 5000);
}
If you call this.passthrough() with no args it only allows requests on the current domain to passthrough. It looks like the websocket connection is on a different port, so try specifying it directly:
this.passthrough('http://localhost:8080/**');
See the docs for more information.
Below is my express server. I am trying to make a get request in ajax, but it turned out failed even though I required jquery at the beginning. It said $ is not defined Other than using jquery ajax, what else can I use to make an API call form RESTful API url?
var express = require('express');
var requestHandler = require('./requestHandler');
var app = express();
var path = require('path');
app.use(express.static(path.join(__dirname, '../client')));
app.get('/homepage', requestHandler.getData);
var port = process.env.PORT || 3000;
app.listen(port);
console.log("Server running at: http://localhost:" + port);
// request handler file:
var express = require('express');
var url = "http://jsonplaceholder.typicode.com/";
module.exports.getData = function (req, res){
$.ajax({
method: 'GET',
url: url+'posts',
success: function(data) {
console.log(data);
res.send(data);
}
});
}
module.exports.getComments = function(userId){
$.ajax({
method: 'GET',
url: url+'/comments',
success: function(data) {
console.log(data);
}
});
}
HTTP GET Request in Node.js Express
var http = require('http');
var options = {
host: 'www.google.com',
path: '/index.html'
};
var req = http.get(options, function(res) {
console.log('STATUS: ' + res.statusCode);
console.log('HEADERS: ' + JSON.stringify(res.headers));
// Buffer the body entirely for processing as a whole.
var bodyChunks = [];
res.on('data', function(chunk) {
// You can process streamed parts here...
bodyChunks.push(chunk);
}).on('end', function() {
var body = Buffer.concat(bodyChunks);
console.log('BODY: ' + body);
// ...and/or process the entire body here.
})
});
req.on('error', function(e) {
console.log('ERROR: ' + e.message);
});
You need to understand things like:
expressjs is serverside code so it can't use jquery ajax like that.
jQuery.ajax() can only be used at view when you load your page in the browser.
You need to use some view engines like jade to create templates and use routers to push the view in the browser. When you have your view in the browser then you can make a reference to the script file which can contain your ajax code to let you have posts and comments.
More information.
Try something like this:
function() {
// Simple POST request example (passing data) :
$http.post("/createProject/"+ id +"", {
projectTitle: pTitle,
userID : id
}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
$scope.getProjects();
console.log("project created");
console.log("this is the response data " + data);
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
Also please note. you will call this from an external JavaScript file. One the express server you will only have "routes" and from external javascript files you can perform HTTP calls on those routes.
Update
#Someone, the express framework is very popular to setup a web server in Node. You can use different render engines to render the view and pass information to the user. This is a very simple example from the Express website listening to two urls (/posts and /comments).
var express = require('express');
var app = express();
app.get('/posts', function (req, res) {
res.send('Render posts!');
});
app.get('/comments', function (req, res) {
res.send('Render comments');
});
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
My angularjs client websocketserver can properly send to the server, but when sending from server to client, the client doesn't register the event.
I'm using angular-websockets at the client side and ws at my express.js server
Here's my code.
server
var port = process.env.PORT || 3002;
var server = http.createServer(app); // app = express
server.listen(port);
var socketComs = require('./lib/socketcoms').connect(server);
var connect = function(server) {
var wss = new WebSocketServer({
server: server
});
wss.on('connection', function(ws) {
console.log("websocket connection open");
ws.on('message', function incoming(message) {
console.log('received', message); // THIS WORKS FINE
});
var id = setInterval(function() {
ws.send('pong', 'data 123', function(err) {
console.log('sent pong', err); // THIS IS NEVER CAUGHT BY CLIENT, err = clean
});
}, 2000); // Pong is never received
});
};
client
var connect = function() {
ws.$on('$open', function() {
console.log('wow its working');
ws.$emit('message', 'some message');
});
ws.$on('pong', function(data) {
console.log('yes', data);
});
ws.$on('$close', function(data) {
console.log('wss closed');
});
};
Can anyone see what's going wrong?
I'm using ng-websocket with PHP socket, and I have the same issue.
I just opened the ng-websocket.js and..guess what? the "ping" and "pong" events don't exist!
The "incoming" event is called "$message"...
This is how to get data from server:
ws.$on('$message', function (response) {
console.log("DATA FROM SERVER", response);