消息通知 使用 [ Web-msg-sender]
74 / 0 / 创建于 3年前 /
chaofu 的个人博客
需求 - 消息通知 （使用框架 是tp6）
pc 网页端 需要有消息通知这个功能，希望 后台自动推送消息给浏览器 不需要 使用 ajax 轮询,采用 web-msg-sender
web-msg-sender 介绍
web-msg-sender是一款web长连接推送框架，采用PHPSocket.IO开发，基于WebSocket长连接通讯，如果浏览器不支持WebSocket则自动转用comet推送。 通过后台推送消息，消息可以即时推送到客户端，非轮询，实时性非常好，性能很高。
特点：
- 多浏览器支持
- 支持针对单个用户推送消息
- 支持向所有用户推送消息
- 长连接推送（websocket或者comet），消息即时到达
- 支持在线用户数实时统计展示
- 支持在线页面数实时统计展示
- 支持跨域推送
环境要求
依赖的其他的项目 workerman 和 phpSocket
安装步骤
//在 tp6 根目录 安装 web-msg-sender
git clone https://github.com/walkor/web-msg-sender
composer install
// 安装 workerman
composer require workerman/workerman
// 安装 phpsocket.io
composer require workerman/phpsocket.io
修改 web-msg-sender 的文件
start_io.php 和 start_web.php
// include __DIR__ . '/vendor/autoload.php';
// 修改为 这个试 位置不一样 路径会不一样 ，本项目是跟 public 同级目录
include '../vendor/autoload.php';
启动 win10 环境 进入对应的目录
php start_io.php start_web.php
js 客户端代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link href="main.css" rel="stylesheet" type="text/css" />
<script src='https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js'></script>
<script src='//cdn.bootcss.com/jquery/1.11.3/jquery.js'></script>
<script src='/notify.js'></script>
</head>
<body>
<div class="notification sticky hide">
<p id="content"> </p>
<a class="close" href="javascript:"> <img src="/icon-close.png" /></a>
</div>
<div class="wrapper">
<div style="width:850px;">
<h3>介绍:</h3>
<b>Web-msg-sender</b> 是一个web消息推送系统，基于<a rel="nofollow" href="https://github.com/walkor/phpsocket.io">PHPSocket.IO</a>开发。<br><br><br>
<h3>支持以下特性：</h3>
<ul>
<li>多浏览器支持</li>
<li>支持针对单个用户推送消息</li>
<li>支持向所有用户推送消息</li>
<li>长连接推送（websocket或者comet），消息即时到达</li>
<li>支持在线用户数实时统计推送（见页脚统计）</li>
<li>支持在线页面数实时统计推送（见页脚统计）</li>
</ul>
<h3>测试:</h3>
当前用户uid：<b class="uid"></b><br>
可以通过url：<a id="send_to_one" href="http://www.workerman.net:2121/?type=publish&to=1445590039000&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9" target="_blank"><font style="color:#91BD09">http://<font class="domain"></font>:2121?type=publish&to=<b class="uid"></b>&content=消息内容</font></a> 向当前用户发送消息<br>
可以通过url：<a href="http://www.workerman.net:2121/?type=publish&to=&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9" target="_blank" id="send_to_all" ><font style="color:#91BD09">http://<font class="domain"></font>:2121?type=publish&to=&content=消息内容</font></a> 向所有在线用户推送消息<br>
<script>
// 使用时替换成真实的uid，这里方便演示使用时间戳
var uid = Date.parse(new Date());
$('#send_to_one').attr('href', 'http://'+document.domain+':2121/?type=publish&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9&to='+uid);
$('.uid').html(uid);
$('#send_to_all').attr('href', 'http://'+document.domain+':2121/?type=publish&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9');
$('.uid').html(uid);
$('.domain').html(document.domain);
</script>
</div>
<script>
$(document).ready(function () {
// 连接服务端
var socket = io('http://'+document.domain+':2120');
console.log(document.domain)
// 连接后登录
socket.on('connect', function(){
socket.emit('login', uid);
});
// 后端推送来消息时
socket.on('new_msg', function(msg){
console.log("new_msg==",msg)
$('#content').html('收到消息：'+msg);
// $('.notification.sticky').notify();
});
// 后端推送来在线数据时
socket.on('update_online_count', function(online_stat){
$('#online_box').html(online_stat);
});
});
</script>
<div id="footer">
<center id="online_box"></center>
<center><p style="font-size:11px;color:#555;"> Powered by <a href="http://www.workerman.net/web-sender" target="_blank"><strong>web-msg-sender!</strong></a></p></center>
</div>
</body>
</html>
服务端发送 消息给 客户端
public function send(Request $request)
{
$msg = $request->param("msg","空");
$msg = (isset($msg)&&$msg!="")?$msg:null;
if (!$msg){
return "未填写信息";
}
// TODO 指明给谁推送，为空表示向所有在线用户推送
$to_uid = "1594093913000";
// 推送的url地址
$push_api_url = "http://127.0.0.1:2121/";
$post_data = array(
"type" => "publish",
"content" => $msg,//json_encode($arrTest),
"to" => $to_uid,
); $ch = curl_init ();
curl_setopt ( $ch, CURLOPT_URL, $push_api_url );
curl_setopt ( $ch, CURLOPT_POST, 1 );
curl_setopt ( $ch, CURLOPT_HEADER, 0 );
curl_setopt ( $ch, CURLOPT_RETURNTRANSFER, 1 );
curl_setopt ( $ch, CURLOPT_POSTFIELDS, $post_data );
curl_setopt ($ch, CURLOPT_HTTPHEADER, array("Expect:"));
$return = curl_exec ( $ch );
curl_close ( $ch );
dump($return);
if ($msg){
return '发送信息';
}else{
return '未填写信息';
}}
介绍很详细的 一篇文章
www.ptbird.cn/web-msg-sender-send-c...
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：