Slim 3 framework and Twig with Ajax GET and POST for Home Page Chat problem?

1

this is my first time asking a question on this site. if mistake first of all sorry about it.

I am making an online store using slim 3 framework. I need a make live chat using Ajax for my slim 3 project. But I could not do that. please tell me how to do that?

2
21016×642 48.2 KB

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 %}

this code worked when refresh page but I need without refresh page.Thank you very much

2

To be quite frank php ratchet websocket is just one of my dreams solution for this kind of issues. Unfortunately odan, despite his huge devotion for Slim community hasn’t taken care for this so far :frowning: .

1 Like
3

Thank you very much :blush:

4

Take a look at this:
Slim 4 Websocket integration

perhaps you can adapt this solution for your needs.