![](/img/trans.png)
[英]How to use socket.io to display realtime data in the client (web browser) from the node.js server?
[英]How to create a handshake between PHP web server and Socket.io on node.js server?
我在服務器10.0.4.18上的端口8020上運行了node.js 4.0上的websocket。我使用socket.io v1.3,express和express-session實現了我的websocket。
項目定義
我需要能夠在socket.io中為從PHP應用程序連接到它的每個用戶創建一個會話。 在用戶發送第一個HTTP請求之后,我將使用將從PHP傳遞到socket.io以及HTTP請求的令牌對它們進行身份驗證。
用戶通過身份驗證后,我需要在socket.io會話中保存一些個人數據,以便以后重用。 每次用戶刷新PHP應用程序時,socket.io都需要知道已創建的會話數據。
問題
每次用戶重新加載/刷新PHP頁面“他/她從哪里連接”時,會話數據都會丟失。 服務器無法知道該連接屬於先前創建的會話XYZ。
我不確定如何在PHP和node.js之間創建握手,其中兩個服務器可以交換唯一數據以將socket.io會話綁定到。
仔細看看這個問題
我在瀏覽器中打開了這個鏈接https://10.0.4.18:8020/set/MikeA 。 “這根據路由代碼直接從node.js為我創建了一個會話”
然后我使用PHP連接到websocket,現在我可以看到會話沒有問題! 我能夠在瀏覽器中打開多個選項卡,並且會按預期進行相同的會話。
它這次工作的原因是因為網址https://10.0.4.18:8020/set/MikeA建立了一個會話並將其綁定在我的瀏覽器和會話之間,從那里我能夠從socket讀取/寫入我的會話。我使用express-socket.io-session包https://www.npmjs.com/package/express-socket.io-session 。
但是如果我不手動使用url創建會話,則會話僅適用於一個頁面加載。 每次重新加載頁面時,會話都會被破壞,就像它從未存在過一樣!
題
當從socket.io連接時,我需要通過https://10.0.4.18:8020/set/MikeA連接到websocket時開發相同的行為。
如何在PHP服務器和socket.io之間建立握手,其中兩個服務器可以在每次重新加載PHP頁面或打開新的瀏覽器選項卡時將會話數據綁定到正確的用戶?
這是我的websocket代碼
var app = require('express')(),
https = require('https'),
fs = require('fs'),
session = require('express-session'),
sharedsession = require("express-socket.io-session"),
fileStore = require('session-file-store')(session),
base64url = require('base64url'),
cookieParser = require("cookie-parser"),
env = require('./modules/config');
var server = https.createServer(
{
key: fs.readFileSync('certs/key.pem'),
cert: fs.readFileSync('certs/cert.pem')
}, app).listen(env.socket.port, env.socket.host, function () {
console.log('\033[2J');
console.log('Websocket is running at https://%s:%s', server.address().address, server.address().port);
});
var io = require('socket.io')(server);
var icwsReq = require('./modules/icws/request.js'),
icwsConn = require('./modules/icws/connection.js'),
icwsInter = require('./modules/icws/interactions.js'),
sessionValidator = require('./modules/validator.js');
var icwsRequest = new icwsReq();
var sessionChecker = new sessionValidator();
var sessionStoreFile = new fileStore({path: './tmp/sessions'});
var clients = {};
var sessionOptions = {
store: sessionStoreFile,
secret: env.session.secret,
name: env.session.name,
rolling: true,
saveUninitialized: false,
resave: true,
unset: 'keep',
cookie: {
maxAge: 60 * 60 * 1000
}
};
var sessionMiddleware = session(sessionOptions);
app.use(sessionMiddleware); // session support for the app
//Set access control headers on every express route.
app.use(function (req, res, next){
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');
next();
});
// Use shared session middleware for socket.io
io.use(sharedsession(sessionMiddleware, {
autoSave: true
}));
//Middleware for authorizing a user before establishing a connection
io.use(function(socket, next) {
var myIP = socket.request.socket.remoteAddress || '';
var token = socket.handshake.query.tokenId || '';
var session = socket.handshake.session || {};
if(!session && !token){
console.log('Log: No session and no token!');
return next(new Error('No tken/session found'));
}
if(!token){
console.log('Log: token was not found');
return next(new Error('Token not found'));
}
//SessionID should be defined on a page reload
console.log('IP Address: ' + myIP + ' SessionID: ' + socket.handshake.sessionID);
//allow any user that is authorized
if(session && session.autherized && token == session.token){
console.log('Log: you are good to go');
return next(new Error('You are good to go'));
}
//if the client changed their token "client logged out"
//terminate the open session before opening a new one
if (session.autherized && token != session.token){
var decodedToken = base64url.decode(token);
sessionChecker.validateData(decodedToken, myIP, env.session.duration, function(isValid, icws){
if(!isValid){
console.log('Log: token could not be validated!');
return next(new Error('Token could not be validated!'));
}
session.authorized = true;
session.icwsServer = icws.host;
session.icwsPort = icws.port;
session.token = token;
session.icwsSessionId = null;
session.icwsToken = null;
icwsRequest.setConnection(icws.host, icws.port);
var icwsConnection = new icwsConn(icwsRequest);
session.save(function(){
console.log('Log: new connection to websocket!');
return next();
});
});
});
io.on('connection', function (socket) {
console.log('Connection is validated and ready for action!');
var socketId = socket.id;
if(!socket.handshake.sessionID){
console.log('sessionId was not found');
return false;
}
var sessionID = socket.handshake.sessionID;
var userCons = clients[sessionID] || [];
//Add this socket to the user's connection
if(userCons.indexOf(socketId) == -1){
userCons.push(socketId);
}
clients[sessionID] = userCons;
socket.on('chat', function(msg){
for (var key in clients[sessionID]) {
if (clients[sessionID].hasOwnProperty(key)) {
var id = clients[sessionID][key];
console.log('Client Said: ' + msg);
io.to(id).emit('chat', {message: 'Server Said: ' + msg});
}
}
});
socket.on('disconnect', function(msg){
console.log('Closing sessionID: ' + sessionID);
var userCons = clients[sessionID] || [];
var index = userCons.indexOf(socketId);
if(index > -1){
userCons.splice(index, 1);
console.log('Removed Disconnect Message: ' + msg);
} else {
console.log('Disconnect Message: ' + msg);
}
});
socket.on('error', function(msg){
console.log('Error Message: ' + msg);
});
});
app.get('/', function (req, res) {
res.send('welcome: ' + req.sessionID);
});
app.get('/read', function (req, res) {
res.send('welcome: ' + req.session.name);
});
app.get('/set/:name', function (req, res) {
req.session.name = req.params.name;
res.send('welcome: ' + req.session.name);
});
以下是我從PHP服務器連接到websocket的方法
<!doctype html>
<html lang="en-US">
<head>
<title>Socket.IO chat</title>
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
<script src="https://10.0.4.18:8020/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/js/jquery-2.1.0.min.js"></script>
<script>
$(function(){
var socket = io.connect('https://10.0.4.18:8020', {secure: true, port: 8020, query : 'PHP generated token that will be used to authenticate the user from node.js'});
//When the "send" button is clicked
$('#f').click(function(e){
e.preventDefault();
var message = $('#m').val().trim();
if( message == ''){
return false;
}
socket.emit('chat', message);
$('#m').val('');
});
socket.on('chat', function(msg){
$('#messages').append($('<li>').text(msg.message));
});
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form action="" id="f">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
將令牌存儲在瀏覽器中,並將其與來自php的每個請求一起發送,其授權持有者如下所示:
Authorization: Bearer token
因此,每當node.js服務器獲得請求時,您都可以比較用戶對應的令牌並獲取數據。
您可以將userid和令牌之間的關系存儲在表中的到期日期,並在每次登錄時刷新令牌。
此外,如果您不想使用表,可以使用JWT將數據存儲在令牌中
你可以在這里找到更多信息:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.