Slim 3框架和带有Ajax GET和POST的Twig解决了主页聊天问题？

Question

这是我第一次在StackOverflow上提问。如果错误首先对此感到抱歉。

我正在使用苗条的3个框架制作在线商店。我需要针对Alim的3个项目进行实时聊天。但是我做不到。请告诉我该怎么做？

routes.php

$app->get('/',['Cart\Controllers\HomeController','index'])->setName('home');
$app->post('/',['Cart\Controllers\HomeController','postindex'])->setName('posthome');

HomeController.php

<?php

namespace Cart\Controllers;

use Slim\Views\Twig;
use Slim\Router;
use Cart\Models\Send_msg;
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request ;

public function postindex(Request $request, Response $response, Router $router, Send_msg $send_msg) 

{
    $this->router = $router;

    Send_msg::Create([
        'send_msg' => $request->getParam('send_msg'), 
        'user_id' => $_SESSION['user']
        ]);    

    $send_msg = $send_msg->where('user_id', $_SESSION['user'])->get()->toArray();

    return $response->withRedirect($this->router->pathFor('home'));

}


public function index(Request $request, Response $response, Twig $view, Send_msg $send_msg)
    {
        $this->router = $router;
        $send_msg = $send_msg->where('user_id', $_SESSION['user'])->get()->toArray();

        return $view->render($response, 'home.twig', [ 
            'send_msg' => $send_msg, 
        ]);
    }

App.twig

<div class="container">
        <div class="row pt-3">
            <div class="chat-main">
                <div class="col-md-12 chat-header rounded-top text-white">
                    <div class="row hide-chat-box">
                        <div class="col-md-12 username text-left">
                            <i class="fa fa-comments-o" aria-hidden="true"></i>
                            <h6 class="text-center">Send us a message</h6>
                        </div>

                    </div>
                </div>



                <div class="chat-content bg-white">
                    <div class="col-md-12 chats border">

                        <form  method="get" action="{{ path_for('home')}}" id="ajaxget">
                        <ul style="padding:8px 0px 8px 0px;" id="add">


                            {% for msg in send_msg %}

                                {% if msg.receive_id != null %} <!-- receive msg -->
                                <li class="pl-2 pr-2 rounded  text-left receive-msg mb-1">
                                    {{msg.send_msg}}
                                </li> 
                                {% else %} <!-- send msg -->
                                <li class="pl-2 pr-2 rounded  text-left send-msg mb-1">
                                    {{msg.send_msg}}
                                </li>
                                {% endif %}

                            {% endfor %}


                        </ul>
                    </form>

                    </div>
                    <div class="col-md-12 message-box border pl-2 pr-2 border-top-0">

                        <form  method="post" action="{{ path_for('posthome')}}" id="ajaxSubmit">
                            <input type="text" name="send_msg" id="send_msg" class="pl-0 pr-0 w-100" placeholder="Enter your message..."/> 
                            <div class="tools">

                                <button class="btn bg-transparent" type="submit" name="submit" id="submit"><i class="fa fa-arrow-circle-o-up" style="color: #18C139;" aria-hidden="true"></i></button>

                            </div>
                        {{ csrf.field | raw }}
                        </form>

                    </div>
                </div>


            </div>
        </div>
    </div>

{% block javascripts %}

             <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> 

            <script>  

            // POST
                $('#ajaxSubmit').submit(function (e) {

                e.preventDefault(); 

                $.ajax({
                    url: $this.attr('action'),
                    type: $this.attr('method'),
                    data: $(this).serialize(),
                    success: function (data) {
                        alert('ajax call finished successfully');
                    },
                    error: function () {
                        alert('ajax call finished successfully');
                    }
                });
            });

            // GET
            $(document).ready(function(){
                setInterval(function() {
                    $('#ajaxget').ready(function () {
                    $.ajax({
                    url:$this.attr('action'),
                    method:$this.attr('method'),
                    success:function(){

                    }
                    });
                    });

                    }, 5000);
            });


        </script>



        {% endblock %}

此代码在刷新页面时有效，但我不需要刷新页面。非常感谢

Answer 1

我尝试过这个。有效。

Router.php

$app->get('/',['Cart\Controllers\HomeController','index'])->setName('home');
$app->post('/',['Cart\Controllers\HomeController','postindex'])->setName('posthome');
$app->get('/data',['Cart\Controllers\HomeController','getindex'])->setName('gethome');

HomeController.php

    <?php

    namespace Cart\Controllers;

    use Slim\Views\Twig;
    use Slim\Router;
    use Cart\Models\Send_msg;
    use Psr\Http\Message\ResponseInterface as Response;
    use Psr\Http\Message\ServerRequestInterface as Request ;

public function getindex(Request $request, Response $response, Router $router, Send_msg $send_msg) 

        {
            $send_msg = $send_msg->where('user_id', $_SESSION['user'])->get();
            return $response->withJson($send_msg);
        }

public function postindex(Request $request, Response $response, Router $router, Send_msg $send_msg) 

        {
            $this->router = $router;

                Send_msg::Create([
                'send_msg' => $request->getParam('send_msg'), 
                'user_id' => $_SESSION['user']
                ]);   

            return $response->withRedirect($this->router->pathFor('home'));
        }

App.twig

{# For Chat #}
        <div class="container">
            <div class="row pt-3">
                <div class="chat-main">
                    <div class="col-md-12 chat-header rounded-top text-white">
                        <div class="row hide-chat-box">
                            <div class="col-md-12 username text-left">
                                <i class="fa fa-comments-o" aria-hidden="true"></i>
                                <h6 class="text-center">Send us a message</h6>
                            </div>

                        </div>
                    </div>



                    <div class="chat-content bg-white">
                        <div class="col-md-12 chats border" id="menu">

                            {% if session.user != null %}
                            <ul style="padding:8px 0px 8px 0px;" id="add">

                                <li id="res" class="pl-2 pr-2 rounded  text-left receive-msg mb-1">

                                </li>
                                <li id="sen" class="pl-2 pr-2 rounded  text-left send-msg mb-1">

                                </li>
                            </ul>
                            {% else %}

                            <div class="cart text-center">
                                <img src="../image/custom/NotSign.png" alt="emptycart">
                                <p style="padding:1px 1px 20px 1px;" ><a href="{{ path_for('auth.signin') }}" class="btn btn-outline-danger">SignIn</a></p>
                            </div>

                            {% endif %}

                        </div>

                        <div class="col-md-12 message-box border pl-2 pr-2 border-top-0">

                        {% if session.user != null %}

                            <form id="formChat" method="post" action="{{ path_for('home')}}">
                                <input type="text" name="send_msg" id="send_msg" class="pl-0 pr-0 w-100" placeholder="Enter your message..."/> 
                                <div class="tools">

                                    <button class="btn bg-transparent" type="submit" name="btnChat" id="btnChat"><i class="fa fa-arrow-circle-o-up" style="color: #18C139;" aria-hidden="true"></i></button>

                                </div>
                            {{ csrf.field | raw }}
                            </form>

                        {% else %}



                        {% endif %}

                        </div>
                    </div>


                </div>
            </div>
        </div>

        {# End Chat #}

        {% block javascripts %}

             <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 


        <script>    
                $('.hide-chat-box').ready(function () {
                $('.chat-content').slideToggle();
                });
        </script>


             <script>
                $('.hide-chat-box').click(function () {
                $('.chat-content').slideToggle();

                });

        </script>

        <script>  

            // GET
            $(document).ready(function(){

                setInterval(function(){

                    jQuery(function() {

                    jQuery.ajax({
                        type: 'GET',
                        url: "{{ path_for('gethome')}}",
                        dataType: 'json',
                        success: function(response) {

                            var ii = Object.keys(response).length;

                            var myHtml = "";
                            for ( i = 0; i < ii ; i++) {
                            var myJSON = response[i]; 

                            if(myJSON.receive_id != null)
                            {
                                myHtml += "<li class='pl-2 pr-2 rounded  text-left receive-msg mb-1' >" + myJSON.send_msg + "</li>";
                            }else
                            {
                                myHtml += "<li class='pl-2 pr-2 rounded  text-left send-msg mb-1'>" + myJSON.send_msg + "</li>";
                            }


                            }
                            $( "#add" ).html( myHtml);

                        }
                    });
            });
         }, 1000);
    });


        </script>
        <script>  

            $('#formChat').submit(function () {
                $.ajax({
                url:$this.attr('action'),
                method:$this.attr('method'),
                data: {
                send_msg: send_msg,
                "_token": "{{ csrf.field }}"
                },
                success:function(data){

                }
              });
            });

        </script>

        {% endblock %}