swoole简易聊天室【php】

作者: 白云证心 | 来源:发表于2018-11-14 15:18 被阅读0次

Laravel + Swoole 打造IM简易聊天室
PHP + Swoole 简易聊天室
swoole简易聊天室【php】
swoole 初识--简易聊天室
TP5学习笔记十一 Swoole
php聊天室(swoole/redis)
基于swoole开发的聊天室（一）
php安装扩展（swoole/redis）
编译安装php，并安装swoole扩展
php 显示扩展信息命令

步骤一：确保在服务器上已经安装swoole扩展

步骤二：服务端代码sw_socket.php

<?php
$server = new swoole_websocket_server("0.0.0.0", 8909);

$server->on('open', function ($server, $request) {
    echo "connection open: {$request->fd}\n";
});

$server->on('message', function ($server, $frame) {
    echo "received message: ".json_encode($frame, JSON_UNESCAPED_UNICODE)."\n";
    foreach($server->connections as $key => $fd) {
        $user_message = $frame->data;
        $server->push($fd, $user_message);
    }

});

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

$server->start();

步骤四：服务器开启8909端口

步骤五：浏览器直接访问=>(域名:8909) 测试是否成功
能这样显示说明是ok的：

image.png

步骤六：写前端代码，test.html,直接在浏览器上访问

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .wrap{
            margin-top: 20px;
            margin-left:400px;
        }
        .msg-wrap{
            border:1px solid;width: 600px;min-height: 100px;
        }
        #msgArea {
            width:100%;height: 100%;text-align:start;resize: none;font-family: 微软雅黑;font-size: 20px;overflow-y: scroll
        }
        .send-wrap{
            border:1px solid;width: 600px;height: 200px;
        }
        .send-wrap2{
            width:100%;height: 100%;
        }
        #userMsg{
            width:100%;height: 100%;text-align:start;resize: none;font-family: 微软雅黑;font-size: 20px;
        }
        .btn-wrap{
            border:1px solid;width: 600px;height: 27px;
        }
        .btn-wrap button{
            float: right;
            padding: 5px;
            background: #087;
            border: 0px;
            color: #fff;
        }
    </style>
</head>

<body>
<div class="wrap" style="">
    <div class="msg-wrap">
        <div id="msgArea" ></div>
    </div>
    <div class="send-wrap">
        <div class="send-wrap2">
            <textarea id="userMsg"></textarea>
        </div>
    </div>
    <div class="btn-wrap">
        <button style="float: right;" onclick="sendMsg()">发送</button>
    </div>
</div>
</body>

</html>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    var ws;
    $(function(){
        link();
    })

    function link () {
        ws = new WebSocket("ws://您的域名:8909");//连接服务器
        ws.onopen = function(event){
            console.log(event);
            console.log('连接了');
        };
        ws.onmessage = function (event) {
            var msg = "<p>"+event.data+"</p>";
            console.log(event.data);
            $("#msgArea").append(msg);
        }
        ws.onclose = function(event){console.log("已经与服务器断开连接\r\n当前连接状态："+this.readyState);};

        ws.onerror = function(event){console.log("WebSocket异常！");};
    }

    function sendMsg(){
        var msg = $("#userMsg").val();
        $("#userMsg").val('');
        ws.send(msg);
    }
</script>

步骤七：效果如下

image.png