基于swoole的网页一对一实时聊天

时间:2024-01-13 08:57:08

需求分析

网站上实现一对一即时沟通,能查看聊天记录以及离线留言,新消息提醒。

核心技术

html5的websocket,php的swoole扩展http://wiki.swoole.com/

数据表

CREATE TABLE `msg` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`content` varchar(255) NOT NULL DEFAULT '' COMMENT '内容',
`tid` int(11) NOT NULL DEFAULT '' COMMENT '接收用户id',
`fid` int(11) NOT NULL DEFAULT '' COMMENT '发送用户id',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=29 DEFAULT CHARSET=utf8 COMMENT='消息表';
CREATE TABLE `fd` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`uid` int(11) NOT NULL DEFAULT '' COMMENT '用户id',
`fd` int(11) NOT NULL DEFAULT '' COMMENT '绑定id',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8 COMMENT='用户绑定表';

Server端代码

<?php

class Server
{
private $serv;
private $conn = null;
private static $fd = null; public function __construct()
{
$this->initDb();
$this->serv = new swoole_websocket_server("0.0.0.0", 9502);
$this->serv->set(array(
'worker_num' => 8,
'daemonize' => false,
'max_request' => 10000,
'dispatch_mode' => 2,
'debug_mode' => 1
)); $this->serv->on('Open', array($this, 'onOpen'));
$this->serv->on('Message', array($this, 'onMessage'));
$this->serv->on('Close', array($this, 'onClose')); $this->serv->start(); } function onOpen($server, $req)
{
// $server->push($req->fd, json_encode(33));
} public function onMessage($server, $frame)
{
//$server->push($frame->fd, json_encode(["hello", "world"]));
$pData = json_decode($frame->data);
$data = array();
if (isset($pData->content)) {
$tfd = $this->getFd($pData->tid); //获取绑定的fd
$data = $this->add($pData->fid, $pData->tid, $pData->content); //保存消息
$server->push($tfd, json_encode($data)); //推送到接收者
} else {
$this->unBind(null,$pData->fid); //首次接入,清除绑定数据
if ($this->bind($pData->fid, $frame->fd)) { //绑定fd
$data = $this->loadHistory($pData->fid, $pData->tid); //加载历史记录
} else {
$data = array("content" => "无法绑定fd");
}
}
$server->push($frame->fd, json_encode($data)); //推送到发送者 } public function onClose($server, $fd)
{
$this->unBind($fd);
echo "connection close: " . $fd;
} /*******************/
function initDb()
{
$conn = mysqli_connect("192.168.1.122", "root", "a123456");
if (!$conn) {
die('Could not connect: ' . mysql_error());
} else {
mysqli_select_db($conn, "test");
}
$this->conn = $conn;
} public function add($fid, $tid, $content)
{
$sql = "insert into msg (fid,tid,content) values ($fid,$tid,'$content')";
if ($this->conn->query($sql)) {
$id = $this->conn->insert_id;
$data = $this->loadHistory($fid, $tid, $id);
return $data;
}
} public function bind($uid, $fd)
{
$sql = "insert into fd (uid,fd) values ($uid,$fd)";
if ($this->conn->query($sql)) {
return true;
}
} public function getFd($uid)
{
$sql = "select * from fd where uid=$uid limit 1";
$row = "";
if ($query = $this->conn->query($sql)) {
$data = mysqli_fetch_assoc($query);
$row = $data['fd'];
}
return $row;
} public function unBind($fd, $uid = null)
{
if ($uid) {
$sql = "delete from fd where uid=$uid";
} else {
$sql = "delete from fd where fd=$fd";
}
if ($this->conn->query($sql)) {
return true;
}
} public function loadHistory($fid, $tid, $id = null)
{
$and = $id ? " and id=$id" : '';
$sql = "select * from msg where ((fid=$fid and tid = $tid) or (tid=$fid and fid = $tid))" . $and;
$data = [];
if ($query = $this->conn->query($sql)) {
while ($row = mysqli_fetch_assoc($query)) {
$data[] = $row;
}
}
return $data;
}
} // 启动服务器
$server = new Server();

备注:swoole_websocket_server是基于tcp的长连接,仅支持cli模式运行。

启动服务器

php Server.php

客户端代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery.json.js"></script> /*js地址:https://files.cnblogs.com/files/zenghansen/jquery.json-2.3.min.js*/
    <script type="text/javascript">
var fid = 1; //发送者uid
var tid = 2; //接收者uid
var exampleSocket = new WebSocket("ws://192.168.1.17:9502");
$(function () {
exampleSocket.onopen = function (event) {
console.log(event.data);
initData(); //加载历史记录
};
exampleSocket.onmessage = function (event) {
console.log(event.data);
loadData($.parseJSON(event.data)); //导入消息记录,加载新的消息
} })
function sendMsg() {
var pData = {
content: document.getElementById('content').value,
fid: fid,
tid: tid,
}
if(pData.content == ''){
alert("消息不能为空");
return;
}
exampleSocket.send($.toJSON(pData)); //发送消息
}
function initData() {
var pData = {
fid: fid,
tid: tid,
}
exampleSocket.send($.toJSON(pData)); //获取消息记录,绑定fd
}
function loadData(data) {
for (var i = 0; i < data.length; i++) {
var html = '<p>' + data[i].fid + '>' + data[i].tid + ':' + data[i].content + '</p>';
$("#history").append(html);
}
}
</script>
</head>
<body>
<div id="history" style="border: 1px solid #ccc; width: 100px; height: auto"> </div>
<input type="text" id="content">
<button onclick="sendMsg()">发送</button>
</body>
</html>

ps1:再复制一份客户端,修改一下发送者你接收者的uid,即可进行模拟实时聊天。

ps2:此代码已经实现了加载历史记录的功能

ps3:若要增加新消息提醒功能,msg还需增加一个已读标示,然后推送给接收者的时候 

if($server->push($tfd, json_encode($data))){
//标记已读
}

ps4:然后没有标记已读的消息,就是新消息提醒。

如有疑问请加作者qq:375161864