Swoole WebSocket 服务端如何主动推送消息?

bloger 2020-06-30 PM 183℃ 1条

最近有个朋友在使用swoole做一个在线看球赛的功能,球赛数据是实时更新的;

要实现的是用户在浏览网页自动更新球赛数据(数据源是一个三方机构提供的,明确上线3秒请求一次);

解决方案:

  1. 轮询:

客户端定时请求服务端接口(服务端再请求第三方接口);

QQ20200630-160905@2x.png

大概就是这样一个流程;虽然流程和逻辑简单,但是负载大、并且用户看到的结果可能是不一致的;

  1. swoole websocket方案:

服务端定时请求接口,如果数据有更新,则主动推送到客户端实时修改数据即可;

QQ20200630-163611@2x.png

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>

主要介绍如何简单的使用定时器,swoole的文档上有比较详细的说明;

没有花里胡哨的文字,只有实用的代码,copy下来就是干,希望你看明白了;

标签: swoole

非特殊说明,本博所有文章均为博主原创。

评论啦~



唉呀 ~ 仅有一条评论


  1. 吟游诗人
    吟游诗人

    棒棒哒 ,我喜欢

    回复 2020-06-30 16:54