zoukankan      html  css  js  c++  java
  • swoole WebSocket 消息推送

    server.php

    <?php
    //连接本地的 Redis 服务
    $redis = new Redis();
    $redis->connect('127.0.0.1', 6379);
    $redis->set("fd", "[]");    //每次第一次执行都需要先清空reids里面的标识
    
     
    $server = new swoole_websocket_server("0.0.0.0", 9502);
    
    $server->on('open', function (swoole_websocket_server $server, $request) use($redis) {
        echo "访客{$request->fd}进来了
    ";
        $server->push($request->fd, "{$request->fd}客户进来了");
        $str = json_decode($redis->get("fd"), true);
        if($str == "") $str = [];
         if(!in_array($request->fd, $str)){
            array_push($str, $request->fd);
             $str = json_encode($str);
             $redis->set("fd", $str);
             echo "目前在线访客:";
             print_r($redis->get("fd"));
         }
    });
    
    $server->on('message', function (swoole_websocket_server $server, $frame) use($redis) {
        echo "系统消息说:{$frame->data}
    ";
        $str = json_decode($redis->get("fd"), true);
         foreach ($str as $key => $value) {
             if($frame->fd != $value){
                 $server->push($value, "系统消息说:".$frame->data);
             }
         }
    });
    
    $server->on('close', function ($ser, $fd) use($redis) {
         echo "client {$fd} closed
    ";
         $str = json_decode($redis->get("fd"), true);
         $point = array_keys($str, $fd, true);  //search key
         array_splice($str, $point['0'],1);  //delete array
         $str = json_encode($str);
         $redis->set("fd", $str);
         echo "删除后在线访客:";
         print_r($redis->get("fd"));
    });
    
    $server->start();

    Cli命令行执行:/usr/local/php/bin/php server.php

    client.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="main">
        <div class="msgs">
            消息通知:<span id="push_content" style="color:red"></span>
        </div>
    </div>
    </body>
    <script>
        var socket = new WebSocket('ws://23.27.127.32:9502');  //监听端口
        socket.onopen = function () {  //监听是否连接服务器成功触发
            console.log('Connected!');
             //socket.send("这条信息会返回给服务器看");    //重要!!客户端返回服务器
        };
        socket.onmessage = function (event) {  // **接收到服务器数据**触发
            console.log(event.data);
    //        alert('Received data: ' + event.data);
            document.getElementById("push_content").innerHTML = event.data;
    //        socket.close();
        };
        socket.onclose = function () {  //与服务器连接断开触发
            console.log('Lost connection!');
        };
        socket.onerror = function () { //与服务器连接出现错误触发
            console.log('Error!');
        };
    //    socket.send('hello, world!');
    
    </script>
    </html>

    admin.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>后台推送界面</title>
    </head>
    <body>
    <div>
        <input type="text" name="content" placeholder="请输入需要推送的信息">
        <button id="push_button">推送</button>
    </div>
    </body>
    <script>
        window.onload = function () {
            var socket = new WebSocket('ws://23.27.127.32:9502');  //监听端口
            var push_button = document.getElementById("push_button");
            var push_content = document.getElementsByName("content");
    
            push_button.onclick = function () {
                socket.send(push_content['0'].value);
            }
            socket.onmessage = function (event) {  // **接收到服务器数据**触发
                // alert('Received data: ' + event.data);   //这里应该返回发送成功的额标识
            };
            socket.onopen = function () {  //监听是否连接服务器成功触发
                console.log('Connected!');
                // socket.send(push_content['0'].value);    //重要!!客户端返回服务器
            };
    
            socket.onclose = function () {  //与服务器连接断开触发
                console.log('Lost connection!');
            };
            socket.onerror = function () { //与服务器连接出现错误触发
                console.log('Error!');
            };
        };
    </script>
    </html>

     

    源码下载

  • 相关阅读:
    马肯9450命令回传
    上海公积金社保业务办理
    工厂调试命令总结
    数据库自动备份
    powerDesigner16.5导出word
    winform 打印预览
    winform 页面设计(一)
    梅特勒-托利多 TCS-35 电子台秤
    winform 练习多线程
    ASP.NET Core 3.1使用Swagger API接口文档
  • 原文地址:https://www.cnblogs.com/houdj/p/8288609.html
Copyright © 2011-2022 走看看