swoole+websocket+redis实现一对一聊天

最新推荐文章于 2024-05-18 12:46:14 发布
最新推荐文章于 2024-05-18 12:46:14 发布
阅读量1k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingqitian1/article/details/82809358
版权

如同web端的QQ和微信一样，这是一个web端的聊天程序。

环境：ubuntu + php + swoole扩展 + redis + mysql

Redis 实现每个连接websocket的服务都唯一绑定一个用户。通过 用户账号 = websocket fd 存到redis中。

Mysql 实现离线消息池。如果一个用户不在线，则其他用户发送给他的消息暂时存储在mysql。待该用户上线时，再从离线消息池取出发送。

具体参考代码和相应注释：

服务端代码：

<?php
$server = new swoole_websocket_server("0.0.0.0", 9052);
$redis = new Redis();
$redis->connect('127.0.0.1', 6379);
$db = new mysqli('127.0.0.1', 'test', 'test', 'thinkphp5');

$server->on('open', function (swoole_websocket_server $server, $request) {
    echo "server: handshake success with fd{$request->fd}\n";//$request->fd 是客户端id
});

$server->on('message', function (swoole_websocket_server $server, $frame) {
    $data = json_decode($frame->data,true); 
    if($data['flag'] == 'init'){
        //用户刚连接的时候初始化，每个用户登录时记录该用户对应的fd
        $GLOBALS['redis']->set($data['from'], $frame->fd);
        //处理发给该用户的离线消息
        $sql = "SELECT `from`,content FROM thinkphp5.app_offline WHERE `to`='{$data['from']}' AND `from`='{$data['to']}' AND `status`='0' ORDER BY addtime ASC;";
        if ($result = $GLOBALS['db']->query($sql)) {
            $re = array();
            while ($row = $result->fetch_assoc()) {
                array_push($re, $row);
            }
            $result->free();
            foreach($re as $content){
                $content = json_encode($content);
                $server->push($frame->fd , $content);
            }
            //设置消息池中的消息为已发送
            $sql = "UPDATE thinkphp5.app_offline SET `status`=1 WHERE `to`='{$data['from']}' AND `from`='{$data['to']}';";
            $GLOBALS['db']->query($sql);
        }
    }else if($data['flag'] == 'msg'){
        //非初始化的信息发送，一对一聊天，根据每个用户对应的fd发给特定用户
        $tofd = $GLOBALS['redis']->get($data['to']); //消息要发给谁
        $fds = []; //所有在线的用户(打开聊天窗口的用户)
        foreach($server->connections as $fd){
            array_push($fds, $fd);
        }
        if(in_array($tofd,$fds)){
            $tmp['from'] = $data['from']; //消息来自于谁
            $tmp['content']  = $data['content']; //消息内容
            $re = json_encode($tmp);
            $server->push($tofd , $re);
        }else{
            //该玩家不在线(不在聊天室内)，将信息发送到离线消息池
            $time = time();
            $sql = "INSERT INTO thinkphp5.app_offline (`to`,`from`,`content`,`status`,`addtime`) VALUES ('{$data['to']}','{$data['from']}','{$data['content']}','0','{$time}');";
            $GLOBALS['db']->query($sql);
        }
    }else if($data['flag'] == 'group'){
        //todo 群聊
        
    }else if($data['flag'] == 'all'){
        //全站广播
        foreach($server->connections as $fd){
            $server->push($fd , $data);
        }
    }  
});

$server->on('close', function ($ser, $fd) {
    echo "client {$fd} closed\n";
});

$server->start();

 

客户端代码：

<!DOCTYPE html>
<html>
<head>
    <title>XST-app</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="keywords" content="test" />
    <meta name="description" content="test" />
    <meta name="author" content="XST-APP" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
　　<style type="text/css">
    body{background:url(/static/images/yuyin_bg.jpg);background-size:100%;}
    @media all and (min-width: 640px) {
        body,html,.wenwen-footer,.speak_window{width:640px!important;margin:0 auto}
        .speak_window,.wenwen-footer{left:50%!important;margin-left:-320px}
    }
    input,button{outline:none;}
    .wenwen-footer{width:100%;position:fixed;bottom:-5px;left:0;background:#fff;padding:3%;border-top:solid 1px #ddd;box-sizing:border-box;}
    .wenwen_btn,.wenwen_help{width:15%;text-align:center;}
    .wenwen_btn img,.wenwen_help img{height:40px;}
    .wenwen_text{height:40px;border-radius:5px;border:solid 1px #636162;box-sizing:border-box;width:66%;text-align:center;overflow:hidden;margin-left:2%;}
    .circle-button{padding:0 5px;}
    .wenwen_text .circle-button{font-size:14px;color:#666;line-height:38px;}
    .write_box{background:#fff;width:100%;height:40px;line-height:40px;}
    .write_box input{height:40px;padding:0 5px;line-height:40px;width:100%;box-sizing:border-box;border:0;}
    .wenwen_help button{width:95%;background:#42929d;color:#fff;border-radius:5px;border:0;height:40px;}
    #wenwen{height:100%;}
    .speak_window{overflow-y:scroll;height:100%;width:100%;position:fixed;top:50px;left:0;}
    .speak_box{margin-bottom:70px;padding:10px;}
    .question,.answer{margin-bottom:1rem;}
    .question{text-align:right;}
    .question>div{display:inline-block;}
    .left{float:left;}
    .right{float:right;}
    .clear{clear:both;}
    .heard_img{height:60px;width:60px;border-radius:5px;overflow:hidden;background:#ddd;}
    .heard_img img{width:100%;height:100%}
    .question_text,.answer_text{box-sizing:border-box;position:relative;display:table-cell;min-height:60px;}
    .question_text{padding-right:20px;}
    .answer_text{padding-left:20px;}
    .question_text p,.answer_text p{border-radius:10px;padding:.5rem;margin:0;font-size:14px;line-height:28px;box-sizing:border-box;vertical-align:middle;display:table-cell;height:30px;word-wrap:break-word;}
    .answer_text p{background:#fff;}
    .question_text p{background:#42929d;color:#fff;text-align:left;}
    .question_text i,.answer_text i{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;position:absolute;top:25px;}
    .answer_text i{border-right:10px solid #fff;left:10px;}
    .question_text i{border-left:10px solid #42929d;right:10px;}
    .answer_text p a{color:#42929d;display:inline-block;}
    .write_list{position:absolute;left:0;width:100%;background:#fff;border-top:solid 1px #ddd;padding:5px;line-height:30px;}
　　</style>
</head>

<body>
<div id="header" class="head">
        <div class="wrap">
                <i class="menu_back"><a href="javascript:history.go(-1);"></a></i>
                <div class="title">
                        <span class="title_d"><p>与 {$tonickname} 的聊天</p></span>
                        <div class="clear"></div>
                </div>
                <!--i class="menu_share"></i-->
        </div>
</div>
<input type="hidden" name="myemail" id="myemail" value="{$myemail}" />
<input type="hidden" name="mynickname" id="mynickname" value="{$mynickname}" />
<input type="hidden" name="myavatar" id="myavatar" value="{$myavatar}" />
<input type="hidden" name="toemail" id="toemail" value="{$toemail}" />
<input type="hidden" name="tonickname" id="tonickname" value="{$tonickname}" />
<input type="hidden" name="toavatar" id="toavatar" value="{$toavatar}" />

<!-- 对话内容 -->
<div class="speak_window">
    <div class="speak_box">

    </div>
</div>

<!-- 内容输入-->
<div class="wenwen-footer">
    <div class="wenwen_btn left"><img src="/static/images/jp_btn.png"></div>
    <div class="wenwen_text left">
        <div class="write_box"><input type="text" class="left" onKeyUp="keyup()" maxlength="100" placeholder="请输入信息(100字以内)..." /></div>   
    </div>
    <div class="wenwen_help right">
            <button onClick="send()" class="right">发送</button>
    </div>
    <div style="opacity:0;" class="clear"></div>
</div>

<script type="text/javascript">
    if ("WebSocket" in window){
        var ws = new WebSocket("ws://192.168.0.1:9052");
        ws.onopen = function(){
            console.log("握手成功");
            var myemail = $("#myemail").val();
            var toemail = $("#toemail").val();
            var arr = {"flag":"init","from":myemail,"to":toemail};
            var str = JSON.stringify(arr);
            ws.send(str);
        };
        ws.onmessage = function(e){
            var toemail = $("#toemail").val();
            var toavatar = $("#toavatar").val();
            var obj = JSON.parse(e.data);
            console.log(e.data);
            //但同时与两个人聊天时，可能两个人的消息都会出现在当前窗口，所以此处加个判断，此窗口只接收当前聊天对象的消息，其他则忽略
            if(obj.from === toemail){
                var ans  = '<div class="answer"><div class="heard_img left"><img src="'+toavatar+'"></div>';
                    ans += '<div class="answer_text"><p>'+obj.content+'</p><i></i>';
                    ans += '</div></div>';
                    $('.speak_box').append(ans);
                    for_bottom();
            }
        };
        ws.onerror = function(){
            console.log("error");
            var  str  = '<div class="question">';
            str += '<div class="heard_img right"><img src="/static/images/xitong.jpg"></div>';
            str += '<div class="question_text clear"><p>聊天服务器出现异常，暂时无法提供服务。</p><i></i>';
            str += '</div></div>';
            $('.speak_box').append(str);
            $('.write_box input').val('');
            $('.write_box input').focus();
            autoWidth();
            for_bottom();
        };

        function send() {
            var content = $('.write_box input').val();
        if(content === ''){
            alert('请输入消息！');
            $('.write_box input').focus();
        }else{
                var toemail = $("#toemail").val();
                var myemail = $("#myemail").val();
                var myavatar = $("#myavatar").val();
                var arr = {"flag":"msg","to":toemail,"from":myemail,"content":content};
                var msg = JSON.stringify(arr);
                console.log(msg);
                ws.send(msg);    
                var  str  = '<div class="question">';
                str += '<div class="heard_img right"><img src="'+myavatar+'"></div>';
                str += '<div class="question_text clear"><p>'+content+'</p><i></i>';
                str += '</div></div>';
            $('.speak_box').append(str);
            $('.write_box input').val('');
            $('.write_box input').focus();
            autoWidth();
            for_bottom();
            }
        
        }
    }else{
        alert("您的浏览器不支持 WebSocket!");
    }
           
    function for_bottom(){
    var speak_height = $('.speak_box').height();
    $('.speak_box,.speak_window').animate({scrollTop:speak_height},500);
    }
    
    function autoWidth(){
    $('.question_text').css('max-width',$('.question').width()-60);
    }
    
    autoWidth();
    
</script>

</body>
</html>

 

数据表结构：

CREATE TABLE `app_offline` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `from` varchar(50) DEFAULT NULL COMMENT '离线发送方',
  `to` varchar(50) DEFAULT NULL COMMENT '离线接收方',
  `content` varchar(1000) DEFAULT NULL COMMENT '发送的离线内容',
  `status` tinyint(4) DEFAULT '0' COMMENT '发送状态：0-未发送,1-已发送',
  `addtime` int(11) DEFAULT NULL COMMENT '发送方发送时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8

 

具体效果：

      

xingqitian1
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Swoole+Redis+webSocket实现点对点即时聊天
wgchen
08-31 527
Swoole+Redis+webSocket实现点对点即时聊天场景webSocket服务端代码前端代码 场景 Swoole+Redis+webSocket实现点对点即时聊天。 webSocket服务端代码 我们需要通过Laravel Command来实现,因为Swoole只能运行在PHP CLI模式下。 1.生成Command类 php artisan make:command SwooleServer 2.编写webSocket Server逻辑 <?php namespace App\Conso
基于Swoole 解决百万级全站消息推送问题
lxw1844912514的博客
03-19 896
问题场景描述基于Swoole的WebSocket服务对站内的消息进行的推送，有个全站进行站内消息的推送很棘手，因为峰值的用户服务1600+/QPS,服务器的配置2核8G(的配置)。难点在于...
【实战】SpringBoot整合Websocket、Redis实现Websocket集群负载均衡
最新发布
勤于笔记，成于点滴。
05-18 1457
因为有websocket的存在，使得前后的主动交互变得容易和低成本。其实在JAVA领域用SpringBoot框架集成Websoket还是很简单的，今天我们重点不是集成而是通过Redis的发布订阅实现Websocket集群通信，当然有条件的也可以用MQ代替。
PHP用swoole+websocket和redis实现web一对一聊天
10-16
主要介绍了PHP用swoole+websocket和redis实现web一对一聊天,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
swoole+redis制作简单的聊天工具,适配tp5.1
littlexiaoshuishui的博客
01-05 625
先上链接；http://chenshuixing.com:8812/chat/chat.html 功能比较简单，可以一对一聊天，也可以群聊。下面是服务器代码,加载了tp5.1框架 &lt;?php /** * ws 优化 基础类库 * User: singwa * Date: 18/3/2 * Time: 上午12:34 */ class Ws { CONST HOST ...
swoole+thinkphp+redis+mysql实现单聊群聊功能
01-29
thinkphp5.1+swoole2.0+redis+php7+mysql 开发单聊、群聊 使用swoole websocket 协议 前端使用js （浏览器手机模式或者手机上体验更佳） 体验地址：http://chat.daxueshenghome.com 账号：三国里边的人物(诸葛亮、...
tp5.1+swoole+redis实战直播平台 (学习版)-tp5live.zip
11-07
【标题】"tp5.1+swoole+redis实战直播平台 (学习版)-tp5live.zip" 提供了一个基于ThinkPHP5.1、Swoole和Redis技术的直播平台学习项目。这个压缩包包含了实现这样一个实时互动直播系统的核心组件和代码示例。 【描述...
利用swoole+redis实现股票和区块链服务
01-20
本文主要给大家介绍了关于swoole+redis实现股票和区块链服务的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 PHP 的redis扩展是阻塞式 IO ，使用订阅/发布模式时，会导致整个进程...
swoole实现的websocket小推送
12-21
一直久仰swoole大名，但总忙于其他就没多研究，最近研究了下，以下是简单的推送实例
基于Swoole实现PHP与websocket聊天室
10-21
本文利用Swoole来实现PHP+websocket的聊天室，过程介绍的很详细，对聊天室的开发很有帮助，有需要的可以参考学习。
PHP+Swoole实现的网页即时聊天
12-20
PHP+Swoole实现的网页即时聊天
WbeSocket实现一对一聊天
zhangdaniu_的博客
08-25 882
然后我们通过js来进行连接WebSocket，这里我们可以看到一些事件，写上自己的服务器ip加端口号，端口一定记得开放，不然连接不上。首先我们先在服务器里创建一个swoole.php的一个文件，这个服务器可以是阿里云或者腾讯云都行，也可以直接用宝塔来操作。我们写完服务端接下来写一个客户端来进行连接WebSocket，接下来先写一个html页面。然后这就是服务端的一个代码。
php swoole4 用WebSocket服务器搭建一个简易的点对点一对一的聊天功能（进阶版）
向宇
09-02 804
前言： 之前我写了一篇搭建简易的聊天室功能的文章，不知道的建议先去看一下：https://blog.csdn.net/qq_36303853/article/details/119958945 这时候好学的小伙伴就会问了，那怎么实现一对一的聊天呢？ 前提 注：这里的用的redis保存用户信息，你也可以用mysql数据库，我提供的只是思路，方法不唯一，能实现就行 一台服务器 安装swoole4 php>=7.2 安装rerdis（我这里用的redis，你也可以用mysql数据库） 宝塔和阿里云分别.
用swoole+websocket和redis实现web客户端一对一聊天
weixin_34275734的博客
04-29 1028
Redis 实现每个连接websocket的服务都唯一绑定一个用户。通过 用户账号 = websocket fd 存到redis中。 Mysql 实现离线消息池。如果一个用户不在线，则其他用户发送给他的消息暂时存储在mysql。待该用户上线时，再从离线消息池取出发送。 具体参考代码和相应注释： <?php $server = new swoole_websocket_server("0.0....
基于 Websocket + PHP + Swoole + Redis 第三方实时推送
热门推荐
夜深的猫
06-07 1万+
在B/S架构中，如果要实现消息推送功能，甚为困难。基于Http协议来进行数据的交互，而Http协议是无信任的短链接，建立连接，传输数据，断开连接。对于推送来讲，它需要和服务器保持通信连接，服务器有新的数据则传送给客户端。当然还有前端基于Ajax轮询服务器拉取数据，这样的效率不高，且对服务器压力较大。下面我将阐述基于 swoole 的推送方案。 基础架构图 用户浏览新闻网站，当第三方新闻媒
swoole中对websocket的理解
一只不正经的程序猿的博客
05-16 1658
我们目前的大多数应用都是以服务端+接口+客户端的方式去协调工作的，这样的好处在于不论是处在何种终端的情况下，都可以完美的和服务端兼容。这样就轻松实现了MVC各个部分的真正解耦。但是提高程序的友好性还是有很多路要走，其中一个大家都会遇到的就是数据实时更新的问题。比如一个用户在手机上做了添加操作，这时候其他的终端也应该及时显示数据的变化情况。这个对于手机来说还算好办，因为现在的各种推送服务完全可以满足...
PHP websocket连接mysql redis
05-13
在 PHP 中，可以使用 Swoole 扩展来实现 WebSocket 连接。Swoole 是 PHP 的一个异步、并行、高性能网络通信框架，支持 WebSocket、TCP/UDP 协议等。 下面是一个简单的 PHP WebSocket 连接 MySQL 和 Redis 的示例： ```php <?php // 引入 Swoole 库 require_once 'path/to/swoole/autoload.php'; // 创建 WebSocket 服务器 $server = new Swoole\WebSocket\Server('0.0.0.0', 9501); // 监听 WebSocket 连接事件 $server->on('open', function (Swoole\WebSocket\Server $server, $request) { echo "new client connected, fd: {$request->fd}\n"; }); // 监听 WebSocket 消息事件 $server->on('message', function (Swoole\WebSocket\Server $server, $frame) { echo "received message: {$frame->data}\n"; // 连接 MySQL 数据库 $mysql = new mysqli('localhost', 'root', 'password', 'database'); if ($mysql->connect_errno) { echo "MySQL connect failed: {$mysql->connect_error}\n"; return; } // 执行查询操作 $sql = "SELECT * FROM table"; $result = $mysql->query($sql); if ($result === false) { echo "MySQL query failed: {$mysql->error}\n"; return; } // 获取查询结果 $data = []; while ($row = $result->fetch_assoc()) { $data[] = $row; } // 关闭 MySQL 连接 $mysql->close(); // 连接 Redis 数据库 $redis = new Redis(); if (!$redis->connect('127.0.0.1', 6379)) { echo "Redis connect failed\n"; return; } // 将查询结果存入 Redis $redis->set('data', json_encode($data)); // 关闭 Redis 连接 $redis->close(); // 发送消息给客户端 $server->push($frame->fd, json_encode($data)); }); // 启动 WebSocket 服务器 $server->start(); ``` 上面的代码中，我们在 WebSocket 消息事件中连接了 MySQL 和 Redis 数据库，执行了一次查询操作，并将查询结果存入了 Redis 中。最后，将查询结果以 JSON 格式发送给了客户端。 需要注意的是，上面的代码仅供参考，实际应用中需要根据具体情况进行修改和完善。例如，需要考虑数据库连接池、错误处理、安全性等问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值