Swoole WebSocket 服务端如何主动推送消息? - 长不大的菜鸟 - 博客园
首页
新闻
博问
专区
闪存
班级
我的博客
我的园子
账号设置
简洁模式 ...
退出登录
注册
登录
菜鸟
Swoole WebSocket 服务端如何主动推送消息?
最近有个朋友在使用swoole做一个在线看球赛的功能，球赛数据是实时更新的；
要实现的是用户在浏览网页自动更新球赛数据（数据源是一个三方机构提供的，明确上线3秒请求一次）；
解决方案：
1.轮询：
客户端定时请求服务端接口（服务端再请求第三方接口）；
大概就是这样一个流程；虽然流程和逻辑简单，但是负载大、并且用户看到的结果可能是不一致的；
1.swoole websocket方案：
服务端定时请求接口，如果数据有更新，则主动推送到客户端实时修改数据即可；
swoole大致就是这样一个简单的流程；逻辑简单，负载小，并且用户看到的结果都是一致的；
下面是我写的一个简单的deomo:
服务端代码：
<?php
// +----------------------------------------------------------------------
// | Created by [ PhpStorm ]
// +----------------------------------------------------------------------
// | Copyright (c) 2006-2016.
// +----------------------------------------------------------------------
// | Create Time (11:40 PM)
// +----------------------------------------------------------------------
// | Author: phpbloger
// +----------------------------------------------------------------------
$ws = new Swoole\WebSocket\Server("0.0.0.0", 9501);
//监听WebSocket连接打开事件
$ws->on('open', function ($ws, $request) {
var_dump($request->fd, $request->get, $request->server);
$ws->push($request->fd, "hello, welcome\n");
});
//监听WebSocket消息事件
$ws->on('message', function ($ws, $frame) {
$data = explode('|',$frame->data);
$ws->push($frame->fd, "server: {$frame->data}");
foreach ($ws->connections as $fd){
$ws->push($fd, '用户'.$data[0].'说:'.$data[1]);
});
//利用swoole的定时器，定时请求第三方接口，将数据实时推送到客户端即可；timer的简单用法
$ws->on('WorkerStart', function ($ws, $worker_id){
Swoole\Timer::tick(3000, function (int $timer_id, $ws) {
echo "timer_id #$timer_id, after 3000ms.\n";
foreach ($ws->connections as $fd){
$rand = mt_rand(0,9999);
$ws->push($fd, '用户'.$rand);
}, $ws);
});
//监听WebSocket连接关闭事件
$ws->on('close', function ($ws, $fd) {
echo "client-{$fd} is closed\n";
});
$ws->start();
客户端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
#message{ border: 1px solid #ccc; width: 100%; height: 200px;overflow: auto;}
#conent{ width: 100%; height: 50px; border: 1px solid #ccc;}
.main{margin-top: 10px;}
#sendMessage{ width: 100%; border: 1px solid #ccc; background: blue; color: #fff; padding: 10px; font-weight: bold; font-size: 16px;}
</style>
<div>
<h1>聊天室</h1>
<div id="message">
</div>
<div class="main">
<textarea id="conent"></textarea>
<button id="sendMessage" onclick="sendMessage()">发送消息</button>
</div>
</div>
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script>
var username = 'user_'+Math.random();
var wsServer = 'ws://127.0.0.1:9501';
var websocket = new WebSocket(wsServer);
websocket.onopen = function (evt) {
console.log("Connected to WebSocket server.");
};
websocket.onclose = function (evt) {
console.log("Disconnected");
};
function sendMessage(){
var content = document.getElementById('conent').value;
if(content == ''){
alert('请输入聊天内容');
return;
//|作为数据包分割线
var text = username+'|'+content;
websocket.send(text);
//监听服务端回推的消息
websocket.onmessage = function (evt) {
var message = evt.data;
var html = '<p>'+message+'</p>';
$("#message").append(html);
//成功将发送置空
document.getElementById("conent").value = "";
};
websocket.onerror = function (evt, e) {
console.log('Error occured: ' + evt.data);
};
</script>
</body>
</html>
转载于：https://www.phpbloger.com/article/421.html
posted on
2020-08-05 15:45
长不大的菜鸟
阅读(2698)
评论(0)
编辑
收藏
举报
刷新评论刷新页面返回顶部
导航
博客园
首页
新随笔
联系
订阅
管理
Powered by:
博客园
Copyright 2022 长不大的菜鸟
Powered by .NET 7.0 on Kubernetes