Nae*_*Nae 5 php mysql node.js socket.io
我是Web开发的初学者。最近,我一直在一个完全基于PHP和JS / jQuery的实时聊天网站上工作(我没有使用任何框架)。目前,我的设置只是简单的AJAX轮询,显然不如我希望的那样好。我的数据库是MYSQL数据库。
我已经阅读了有关websockets的信息,我的新初始计划是使用Socket.io创建一个NodeJS服务器来处理消息(如何集成nodeJS + Socket.IO和PHP?),并且我考虑将这些消息存储在MySQL数据库中(使用Node.js的MySQL)。
这是我目前所拥有的(不多,我想在实际取得进展之前阐明如何进行发展)。这是我的测试设置,实际聊天中使用的HTML显然有所不同。
Node.js服务器:
// NODE
var socket = require( 'socket.io' );
var express = require( 'express' );
var https = require( 'https' );
var http = require( 'http'); //Old
var fs = require( 'fs' );
var app = express();
//Working HTTPS server
var server = https.createServer({
key: fs.readFileSync('/etc/letsencrypt/live/%site%/privkey.pem'),
cert: fs.readFileSync('/etc/letsencrypt/live/%site%/fullchain.pem')
},app);
// var server = https.createServer( app ); Won't work cause no cert.
var io = socket.listen( server );
console.log("Server Started");
io.sockets.on( 'connection', function( client ) {
console.log( "New client !" );
client.on( 'message', function( data ) {
console.log( 'Message received ' + data); //Logs recieved data
io.sockets.emit( 'message', data); //Emits recieved data to client.
});
});
server.listen(8080, function() {
console.log('Listening');
});
Run Code Online (Sandbox Code Playgroud)
JS客户端脚本:
var socket = io.connect('https://%site%:8080');
document.getElementById("sbmt").onclick = function () {
socket.emit('message', "My Name is: " + document.getElementById('nameInput').value + " i say: " + document.getElementById('messageInput').value);
};
socket.on( 'message', function( data ) {
alert(data);
});
Run Code Online (Sandbox Code Playgroud)
我的超简单测试HTML:
<form id="messageForm">
<input type="text" id="nameInput"></input>
<input type="text" id="messageInput"></input>
<button type="button" id="sbmt">Submits</button>
</form>
Run Code Online (Sandbox Code Playgroud)
PHP需要一些解释-当有人连接到我的网站时,我开始运行session_start()。这是因为我想进行匿名会话。我通过$_SESSION变量区分登录用户和匿名用户。一个匿名用户将已$_SESSION['anon']设置为true,以及尚未$_SESSION['username']设置。登录的用户显然会将其反转。
聊天时-登录用户和匿名用户均可使用。当用户匿名时,将从数据库或随机名称中生成随机用户名。用户登录后,将选择自己的用户名。现在,我使用Ajax轮询的系统是这样的:
用户输入消息(在当前的聊天解决方案中,而不是上面发送的测试HTML),然后按Enter键,然后对以下功能进行AJAX调用:
function sendMessage($msg, $col) {
GLOBAL $db;
$un = "";
if (!isset($_SESSION['username'])) {
$un = self::generateRandomUsername();
} else {
$un = $_SESSION['username'];
}
try {
$stmt = $db->prepare('INSERT INTO chat (id, username, timestamp, message, color) VALUES (null, :un, NOW(), :msg, :col)');
$stmt->bindParam(':un', $un, PDO::PARAM_STR);
$stmt->bindValue(':msg', strip_tags(stripslashes($msg)), PDO::PARAM_STR); //Stripslashes cuz it saved \\\ to the DB before quotes, strip_tags to prevent malicious scripts. TODO: Whitelist some tags.
$stmt->bindParam(':col', $col, PDO::PARAM_STR);
} catch (Exception $e) {
var_dump($e->getMessage());
}
$stmt->execute();
}
Run Code Online (Sandbox Code Playgroud)
(请不要讨厌我的错误代码和糟糕的异常处理,这不是任何官方项目)。此功能将用户消息输入数据库。
为了接收新消息,我使用setTimeout()JS函数,在收到新消息后每1秒运行一次AJAX检查。我保存了JS中显示的最后一条消息的ID,并将该ID作为参数发送给此PHP函数(并且每1秒运行一次):
/* Recieve new messages, ran every 1s by Ajax call */
function recieveMessage($msgid) {
//msgid is latest msg id in this case
GLOBAL $db;
$stmt = $db->prepare('SELECT * FROM chat WHERE id > :id');
$stmt->bindParam(':id', $msgid, PDO::PARAM_INT);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
return json_encode($result);
}
Run Code Online (Sandbox Code Playgroud)
问题是:如何使用我前面提到的node.js服务器和websocket设置来实现类似的功能?我需要以某种方式区分登录用户和匿名用户。我的第一个想法是只运行从node.js服务器到PHP的ajax调用并传递消息数据,PHP会像现在一样将其插入数据库。但是,这种情况下的问题是如何再次将消息发送给客户端?在将消息输入数据库时应用用户名,这意味着我必须调用AJAX才能保存到数据库,然后调用另一个AJAX来提取新输入的消息并将其发送给客户端,或者创建一个函数插入并提取并返回提取的消息。但是,当完全同时输入2条消息时,这不会引起问题吗?
是否可以在Node.js中访问PHP会话变量?然后,我可以重写所有数据库查询以在Node.js服务器而不是PHP中工作。
如果我的代码或解释混乱,我再次道歉。
因此,对于每个想知道并会在将来找到该线程的人:我没有找到想要使用的解决方案的答案,但是无论如何,我还是找到了答案:
我没有像以前那样让Node.js服务器发送AJAX请求,而是像以前一样,将来自客户端的jQuery $ .post()请求留给了PHP函数。
接下来,我要做的是实现一个MySQL侦听器,该侦听器检查MySQL binlog中的更改。我用过mysql-events模块。它检索包含所有数据的新添加的行,然后使用socket.io发出函数将其发送到连接的客户端。我还必须放弃SSL,因为它显然讨厌我。这是一个很小的爱好项目,因此我真的不必为SSL操心。
最好的解决方案显然是在Node.js中对整个Web服务器进行编程,然后完全删除Apache。Node.js对于实时应用程序来说很棒,它是一种非常容易学习和使用的语言。
我的Node.js + Socket.io + mysql-events设置:(忽略未使用的需求)
// NODE
var socket = require( 'socket.io' );
var express = require( 'express' );
var https = require( 'https' );
var http = require( 'http');
var fs = require( 'fs' );
var request = require( 'request' );
var qs = require( 'qs' );
var MySQLEvents = require('mysql-events');
var app = express();
/*Correct way of supplying certificates.
var server = https.createServer({
key: fs.readFileSync('/etc/letsencrypt/live/x/privkey.pem'),
cert: fs.readFileSync('/etc/letsencrypt/live/x/cert.pem'),
ca: fs.readFileSync('/etc/letsencrypt/live/x/chain.pem')
},app); */
var server = http.createServer( app ); // Won't work without cert.
var io = socket.listen( server );
console.log("Server Started");
//DB credentials
var dsn = {
host: 'x',
user: 'x',
password: 'x',
};
var mysqlEventWatcher = MySQLEvents(dsn);
//Watcher magic, waits for mysql events.
var watcher = mysqlEventWatcher.add(
'newage_db.chat',
function (oldRow, newRow, event) {
//row inserted
if (oldRow === null) {
//insert code goes here
var res = JSON.stringify(newRow.fields); //Gets only the newly inserted row data
res.charset = 'utf-8'; //Not sure if needed but i had some charset trouble so i'm leaving this.
console.log("Row has updated " + res);
io.sockets.emit('message', "[" + res + "]"); //Emits to all clients. Square brackets because it's not a complete JSON array w/o them, and that's what i need.
}
//row deleted
if (newRow === null) {
//delete code goes here
}
//row updated
if (oldRow !== null && newRow !== null) {
//update code goes here
}
//detailed event information
//console.log(event)
});
io.sockets.on( 'connection', function( client ) {
console.log( "New client !" );
client.on( 'message', function( data ) {
//PHP Handles DB insertion with POST requests as it used to.
});
});
server.listen(8080, function() {
console.log('Listening');
});
Run Code Online (Sandbox Code Playgroud)
客户端JavaScript发送消息:
$('#txtArea').keypress(function (e) {
if (e.which == 13 && ! e.shiftKey) {
var emptyValue = $('#txtArea').val();
if (!emptyValue.replace(/\s/g, '').length) { /*Do nothing, only spaces*/ }
else {
$.post("/shana/?p=execPOST", $("#msgTextarea").serialize(), function(data) {
});
}
$('#txtArea').val('');
e.preventDefault();
}
});
Run Code Online (Sandbox Code Playgroud)
Cliend JavaScript接收消息:
socket.on( 'message', function( data ) {
var obj = JSON.parse(data);
obj.forEach(function(ob) {
//Execute appends
var timestamp = ob.timestamp.replace('T', ' ').replace('.000Z', '');
$('#messages').append("<div class='msgdiv'><span class='spn1'>"+ob.username+"</span><span class='spn2'style='float: right;'>"+timestamp+"</span><div class='txtmsg'>"+ob.message+"</div>");
$('#messages').append("<div class='dashed-line'>- - - - - - - - - - - - - - - - - - - - - - - - - - -</div>"); //ADD SCROLL TO BOTTOM
$("#messages").animate({ scrollTop: $('#messages').prop("scrollHeight")}, 1000);
});
});
Run Code Online (Sandbox Code Playgroud)
不知何故,binlog魔术破坏了时间戳字符串,因此要清理它,我不得不替换字符串本身。
PHP DB插入功能:
function sendMessage($msg, $col) {
GLOBAL $db;
$un = "";
if (!isset($_SESSION['username'])) {
$un = self::generateRandomUsername();
} else {
$un = $_SESSION['username'];
}
try {
$stmt = $db->prepare('INSERT INTO chat (id, username, timestamp, message, color) VALUES (null, :un, NOW(), :msg, :col)');
$stmt->bindParam(':un', $un, PDO::PARAM_STR);
$stmt->bindValue(':msg', strip_tags(stripslashes($msg)), PDO::PARAM_LOB); //Stripslashes cuz it saved \\\ to the DB before quotes, strip_tags to prevent malicious scripts. TODO: Whitelist some tags.
$stmt->bindParam(':col', $col, PDO::PARAM_STR);
} catch (Exception $e) {
var_dump($e->getMessage());
}
$stmt->execute();
}
Run Code Online (Sandbox Code Playgroud)
我希望这对某人至少有帮助。随意使用此代码,因为无论如何我可能已经从互联网上复制了大部分代码:)我将不时检查此线程,因此,如果您有任何疑问,请发表评论。
| 归档时间: |
|
| 查看次数: |
9200 次 |
| 最近记录: |