即时通讯---meepops

最新推荐文章于 2021-07-27 22:16:52 发布

清泉·指潭

最新推荐文章于 2021-07-27 22:16:52 发布

阅读量670

点赞数 1

分类专栏：开发技术文章标签： PHP MeePops Websocket 即时通讯在线聊天

本文链接：https://blog.csdn.net/qq_39849147/article/details/84791461

版权

开发技术专栏收录该内容

10 篇文章 0 订阅

订阅专栏

即时通讯----MeepoPS-PHP

手册地址: http://meepops.lanecn.com
Github: https://github.com/lixuancn/MeepoPS

目录下有四个demo，开发即时通讯我们这里可以直接调试的是demo-telnet.php.

cd到MeepoPS根目录执行 sudo php demo-telnet.php start 显示OK,执行成功

打开新的终端到MeepoPS根目录，执行 telnet 0.0.0.0 19910
（代码中的默认ID及端口，若不同请自行更改）。
执行成功，终端可输入文字完成最简单的对话。

在websocket连通前，可用telnet进行测试，两个协议中的回调函数完全相同。

MeePops给我们搭建了WebSocket服务底层，我们只需要
new \MeepoPS\Api\Websocket('0.0.0.0', '3100');

这里与telnet不同的只是调用的类（demo-telnet中是Telnet）。

Telnet可以在终端直接连接，WebSocket 是一种网络通信协议，Web浏览器和服务器都必须实现 WebSockets 协议来建立和维护连接。

所以，我们开启websocket服务后（sudo php websokect.php start）,不管是网页。客户端还是app中，需要在JS代码中与我们的Websocket服务建立连接。

一对一聊天示例—服务端代码

<?php
/**
 * websocket一对一聊天
 * Created by Lane
 * User: ChaoTanLiu
 * Date: 18/12/4
 * Time: 下午14：44
 * E-mail: 981232310@qq.com
 * WebSite: https://www.cnblogs.com/yizhiqingtan/
 */

//引入MeepoPS
require_once 'MeepoPS/index.php';

//使用WebSocket协议传输的Api类
$webSocket = new \MeepoPS\Api\Websocket('0.0.0.0', '3100');
//启动的子进程数量. 通常为CPU核心数
$webSocket->childProcessCount = 1;
//设置MeepoPS实例名称
$webSocket->instanceName = 'MeepoPS-WebSocket';

//回调方法
$webSocket->callbackNewData = 'callbackNewData';
$webSocket->callbackConnectClose = 'callbackConnectClose';


//使用HTTP协议传输的Api类
// $http = new \MeepoPS\Api\Http('0.0.0.0', '3101');
// $http->setDocument('localhost:3101', './Example/Chat_Robot/Web');

//启动MeepoPS
\MeepoPS\runMeepoPS();

//收到新数据时
function callbackNewData($connect, $data)
{
    $data = json_decode($data,true);
    //需要获取到的数据
    // $data = array(
    //                 'content'=>$data,
    //                 'my_user_id'=>8,
    //                 'send_user_id'=>2,
    // );  
    var_dump($data);
    $my_user_id = $data['my_user_id'];
    $send_user_id = $data['send_user_id'];
    $content = $data['content'];
    $time = time();

    $dbhost = 'vivioning.mysql.rds.aliyuncs.com:3225';  // mysql服务器主机地址
    $dbuser = 'root';            // mysql用户名
    $dbpass = 'ERPerp20180000';          // mysql用户名密码
    $conn = mysqli_connect($dbhost, $dbuser, $dbpass,"west_education");

    $sql = "INSERT INTO `west_education`.`w_meepops`(`status`, `web_id`, `user_id`,`create_time`) VALUES (1, $connect->id,$my_user_id,$time )";
    if(! $conn )
    {
        die('Could not connect: ' . mysqli_error());
    }
    echo '接收到消息！';
    mysqli_query($conn,$sql);

    mysqli_close($conn);



    if(!empty($send_user_id)){
        $conn = mysqli_connect($dbhost, $dbuser, $dbpass,"west_education");
        $sql = "SELECT * FROM `west_education`.`w_meepops` WHERE `user_id` = $send_user_id  AND `status` = 1  order by id desc LIMIT 0,1";
        if(! $conn )
        {
            die('Could not connect: ' . mysqli_error());
        }
        echo '查询到消息';
        $result = mysqli_query($conn,$sql);
        var_dump($result);
        $result = $result->fetch_array();
        $send_id = $result['web_id'];
        var_dump($result);
        mysqli_close($conn);
    }

    $message = array(
        'msg' => 'OK',   
        'data' => array(
            'content' => $content,
            'type' => 0,
            'create_time' => date('Y-m-d H:i:s'),
        ),
    );
    $connect->send(json_encode($message));
    
    if(isset($send_id)&&!empty($send_id))
    {
        var_dump("我发送给了web_id:".$send_id);
        foreach ($connect->instance->clientList as $client) {
            if ($send_id == $client->id) {
    
                $message = array(
                    'msg' => 'OK',   
                    'data' => array(
                        'content' => $content,
                        'type' => 1,
                        'create_time' => date('Y-m-d H:i:s'),
                    ),
                );
                $client->send(json_encode($message));
            }
        }
    }

  
}


//链接关闭时
function callbackConnectClose($connect)
{
    $dbhost = 'vivioning.mysql.rds.aliyuncs.com:3225';  // mysql服务器主机地址
    $dbuser = 'root';            // mysql用户名
    $dbpass = 'ERPerp20180000';          // mysql用户名密码
    $conn = mysqli_connect($dbhost, $dbuser, $dbpass,"west_education");
    $sql = "UPDATE `west_education`.`w_meepops` SET `status` = 0 WHERE `web_id` = $connect->id";

    if(! $conn )
    {
        die('Could not connect: ' . mysqli_error());
    }
    echo '链接关闭';
    mysqli_query($conn,$sql);
    mysqli_close($conn);
}

这里我们只用到了其中的callbackNewData，callbackConnectClose回调函数就可以解决我们的精准聊天功能。

callbackNewData 为接收新消息时触发的回调函数.
callbackConnectClose为链接关闭时触发的回调函数.

w_meepops表

id	create_time	update_time	status	web_id	user_id
1	1543835510		1	1	2

在链接触发时，客户端模拟发送一条JSON数据，服务器接受到并解析成数组如以下

    $data = array(
                    'content'=>'',
                    'my_user_id'=>8,
                    'send_user_id'=>'',
    );

my_user_id 是与websocket无关的，例如登陆的APP中的ID。

建立起链接后我们能从callbackNewData回调函数传入的$connect对象通过$connect->id的方式获取到此链接在此服务建立后的唯一ID，但是如果链接关闭打开或者刷新后，再次获取的ID将会改变。我们需要将获取到的链接上的唯一ID与登陆的APP中的ID绑定.

这里我通过存储数据库，将web_id (websocket链接ID)与user_id()进行绑定.
并且在断开链接时通过更改status，让他们绑定失效。

当客户端真正发送消息时，服务端callbackNewData回调函数再次触发,此时客户端传来的send_user_id为想要发送指定用户的app的ID，content为客户端发出的消息内容，通过查找数据库确定指定用户当前的链接ID，从而通过遍历client对象，并且判定id匹配时通过send方法将消息以JSON形式发送出去。并且将消息以send同时发送给自己.

注意：客户端只能传数据给服务端，并没有直接发送功能，服务端接收到数据以send方法返回给客户端，客户端接收到的数据才用作处理发送。

匹配的客户端接受到服务端返回的数据时，通过取得的type判定是对方发送还是自己发送(0为自己1为对方)，从而页面展示不同。content为发出的内容。

注意下面的 websocket = new WebSocket(“ws://118.24.74.99:3100/”);

需要更改成自己服务器的IP及端口，本地的话可以使用0.0.0.0:19910

聊天网页实例–客户端代码–放在同一文件夹下

chat.html

<!DOCTYPE html>
<html class="chathtml">
<head>
    <meta charset="utf-8" />
    <title>Webscoket</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<!-- echo 把接受到的数据返回过去 -->

<body class="chatbody">
    <!-- 导航 -->
    <div class="navigation">
        <h1>聊天界面</h1>
        <a href="javascript:history.go(-1);" id="back">返回</a>
    </div>
    <!-- 会话列表 -->
    <div class="chatDiv">
        <div id="entername"></div>
        <ul id="chatlist">
        </ul>
    </div>
    <!-- 发送消息的输入框和按钮 -->
    <div class="sendMessage">
        <input id="sendText" type="text" />
        <button id="sendBtn">发送</button>
    </div>
    <script type="text/javascript">
    // 第一步   检测是否支持websocket  如果支持就创建websocket
    var websocket = null;
    var user = {};

    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://118.24.74.99:3100/");
    } else {
        alert('当前浏览器不支持websocket')
    }

    // 创建节点
    function createChatNode(mes, ismine) {
        var $li = document.createElement('li');
        $li.innerText = mes.content
        if (ismine == true) {
            $li.setAttribute("class", "mine");
        } else {
            $li.setAttribute("class", "other");
        }
        var $list = document.getElementById('chatlist');
        $list.appendChild($li);
    }

    // 接受到的信息的展示
    function showMessage(mes) {
        if (mes.type === 0) {
            createChatNode(mes, true)
        } else {
            createChatNode(mes, false)
        }
    }

    // 进入会话的人的信息

    // 连接成功建立的回调方法
    websocket.onopen = function(e) {
        // 建立连接后，要根据页面的url得知发起会话的人是想给谁发，或者在那个群里发
        var url = window.location.href;
        var hash = url.slice(url.indexOf('?') + 1).split('&')
        var params = []
        var obj = {}
        for (var i = 0; i < hash.length; i++) {
            for (var l = 0; l < hash[i].split('=').length; l++) {
                params.push(hash[i].split('=')[l])
            }
        }
        obj.content = ''
        obj.my_user_id = Number(params[1])
        obj.send_user_id = ''
        websocket.send(JSON.stringify(obj));
        // 发送消息
        document.getElementById("sendBtn").onclick = function() {
            var txt = document.getElementById("sendText").value;
            document.getElementById('sendText').value = '';
            console.log(txt)
            if (txt) {
                obj.content = txt
                obj.my_user_id = Number(params[1])
                obj.send_user_id = Number(params[3])
                websocket.send(JSON.stringify(obj));
            }
            // console.log(obj)
        }
    }
    // var url = window.location.href;
    // var hash = url.slice(url.indexOf('?') + 1).split('&')
    // var params = []
    // for (var i = 0; i < hash.length; i++) {
    //     for (var l = 0; l < hash[i].split('=').length; l++) {
    //         params.push(hash[i].split('=')[l])
    //     }
    // }
    // var obj = {}
    // obj.content = 'sss'
    // obj.my_user_id = Number(params[1])
    // obj.send_user_id = Number(params[3])
    // console.log(obj)
    //接收到消息的回调方法
    websocket.onmessage = function(e) {
        // if (e == '好友在忙碌') {
        //     console.log('e', e);
        //     websocket.close();
        //     return;
        // }
        var obj = JSON.parse(e.data).data;
        showMessage(obj);
        console.log(JSON.parse(e.data).data)
    }

    //连接关闭的回调方法
    websocket.onclose = function() {
        console.log("websocket close");
    }


    //连接发生错误的回调方法
    websocket.onerror = function() {
        alert("Webscoket连接发生错误");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function() {
        websocket.close();
    }
    </script>
</body>

</html>

聊天网页实例–账户一的打开的网站

index.html

<!DOCTYPE html>
<html>
<!-- 
下载nodejs-websocket
https://github.com/sitegui/nodejs-websocket 
npm install nodejs-websocket
但是报错了，说是缺少package.json

所以：
1、npm init       创建package.json
2、sudo npm install nodejs-websocket   就可以了
3、创建一个wsServer.js   是服务器文件
4、服务器端的代码可以先看https://github.com/sitegui/nodejs-websocket
上面的使用方法。
5、启动服务、node wsServer.js


这里使用的是nodejs_websocket. 这个可以通过socket.io 进行改造的。

-->


<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小明</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<!-- echo 把接受到的数据返回过去 -->
<!-- 这里是小明的聊天列表 
   定义了他进入的是聊天室，还是单聊。
   告诉了服务器，我是要进入那个聊天室。
   或者是我要和谁聊天。
-->
<body>
    <div class="navigation"><h1>小明好友列表 (id = 1)</h1></div>
    <ul class="fridenslist">
        <li><a href="chat.html?my_user_id=1&send_user_id=2">小红</a></li>
    </ul>
</body>

</html>

聊天网页实例–账户二的打开的网站

index2.html

<!DOCTYPE html>
<html>
<!-- 
下载nodejs-websocket
https://github.com/sitegui/nodejs-websocket 
npm install nodejs-websocket
但是报错了，说是缺少package.json

所以：
1、npm init       创建package.json
2、sudo npm install nodejs-websocket   就可以了
3、创建一个wsServer.js   是服务器文件
4、服务器端的代码可以先看https://github.com/sitegui/nodejs-websocket
上面的使用方法。
5、启动服务、node wsServer.js
-->

<!-- 这里是小红的聊天列表 -->
<head>
    <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小红</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<!-- echo 把接受到的数据返回过去 -->

<body>
    <div class="navigation"><h1>小红好友列表 (id = 2)</h1></div>
    <ul class="fridenslist">
        <li><a href="chat.html?my_user_id=2&send_user_id=1">小明</a></li>
    </ul>
    
</body>

</html>

聊天网页实例—需要加载的css样式

style.css

.navigation {
    width: 100%;
    height: 1.333333rem;
    font-size: 0.426667rem;
    background-color: #00BFFF;
    color: #fff;
    text-align: center;
    line-height: 1.33rem;
    position: fixed;
    top: 0;
    left: 0;
}

.fridenslist{
	margin-top: 1.333333rem;
}



.fridenslist li {
    border-bottom: 1px solid #f0f0f0;
    height: 1.333333rem;

}

.fridenslist li a {
    display: block;
    height: 100%;
    line-height: 50px;
    padding-left: 10px;
}


/*聊天界面*/

#back {
    display: block;
    position: absolute;
    top: 0;
    left: 0.266667rem;
    width: 1.2rem;
    color: #fff;
}

.sendMessage {
    position: fixed;
    height: 1.066667rem;
    background-color: #fff;
    width: 90%;
    left: 50%;
    margin-left: -45%;
    border-radius: 5px;
    bottom: 10px;
}

#sendText {
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 0.8rem;
    margin-top: 0.13333rem;
    margin-left: 0.266667rem;
    width: 80%;
    border-radius: 0.133333rem;
}

#sendBtn {
    width: 12%;
    height: 0.8rem;
    border-radius: 0.133333rem;
    font-size: 0.4rem;
    color: #fff;
    background-color: #00BFFF;
    text-align: center;
}

.chatbody,
.chathtml {
    background-color: #ddd;
    height: 100%;
}

#entername{
	margin-top: 2.0rem;
}

#chatlist .other{
    padding: 0.266667rem;
    font-size: 0.4rem;
}

#chatlist .mine{
	padding: 0.266667rem;
	font-size: 0.4rem;
    text-align: right;
}

清泉·指潭

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
即时通讯---meepops

即时通讯----MeepoPS-PHP手册地址: http://meepops.lanecn.comGithub: https://github.com/lixuancn/MeepoPS目录下有四个demo，开发即时通讯我们这里可以直接调试的是demo-telnet.php.cd到MeepoPS根目录执行 sudo php demo-telnet.php start 显示OK,执行成功...
复制链接

扫一扫