利用Swoole实现服务器通过WebSocket主动向浏览器推送数据

2022-12-23 19:26:42 浏览数 (3)

WebSocket 协议是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信,允许服务器主动发送信息给客户端。

下面的代码演示了利用 Swoole 实现服务器向浏览器主动推送数据的例子。

Server端代码:

代码语言:javascript复制
<?php
$server = new SwooleWebsocketServer('192.168.1.1', 9501);

$server->on('Open', function($server, $req) {
    echo 'connection open: '.$req->fd . "n";
    $server->push($req->fd, "welcome to www.sunbloger.com");
    for ($i=1; $i<=9; $i  ) {
        $server->push($req->fd, $i);
        sleep(3);
    }
});

$server->on('Message', function($server, $req) {
    echo "client(".$req->fd."): " . $req->data . "n";
});

$server->on('Close', function($server, $fd) {
    echo "connection close: {$fd}n";
});

$server->on('WorkerStart', function ($server, $workerId) {
    echo "worker started: {$workerId}n";
});

$server->start();
?>

浏览器端(Client)代码:

代码语言:javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket Client</title>
</head>
<body>  
  <input type="text" id="text">
  <input type="submit" value="发送数据" onclick="send()">
  <div id="msg"></div>
</body>
<script>
var isSupport;

if (typeof WebSocket != 'undefined') {
    isSupport = true;
} else {
    isSupport = false;
}

if (isSupport == true) {
    var msg = document.getElementById("msg");
    var wsServer = 'ws://192.168.1.1:9501';
    var websocket = new WebSocket(wsServer);
    websocket.onopen = function (e) {
        console.log("websocket server open.");
    };
    
    websocket.onmessage = function (e) {
        msg.innerHTML  = e.data  '<br>';
    }
    
    websocket.onclose = function (e) {
        console.log("websocket server close.");
    };
    
    
}

function send() {
    if (isSupport == true) {
        var text = document.getElementById('text').value;
        document.getElementById('text').value = ''; //向服务器发送数据
        websocket.send(text);
    } else {
        alert("浏览器不支持WebSocket!");
    }
}

</script>
</html>

阳光部落原创,更多内容请访问http://www.sunbloger.com/

0 人点赞