README

此组件可以帮助您创建用户之间的聊天。使用长轮询技术进行聊天，它模拟实时消息。

功能包括

即时消息
使用长轮询技术
模拟实时消息

安装

Composer

您可以使用 Composer 进行自动化过程

$ php composer.phar require belousovr/belousovChatBundle

将组件添加到您的应用内核

// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new FOS\UserBundle\FOSUserBundle(),
        new belousovr\belousovChatBundle\belousovChatBundle(),
        // ...
    );
}

如果您已经有了 FOSUserBundle，在您的 AppKernel 中，您不需要将其添加两次。

配置

第一次需要配置 FOSUserBundle。接下来，您需要在文件 app/config/routing.yml 中配置路由。

 belousovr:
     resource: "@belousovChatBundle/Controller"
     type:     annotation

并在 services.yml 中添加以下代码

parameters:
    belousov.chat.user_class: AppBundle\Entity\User
services:
    belousov.mapping.listener:
        class: belousovr\belousovChatBundle\EventListener\DynamicRelationSubscriber
        tags:
            - { name: doctrine.event_listener, event: loadClassMetadata }
        arguments:
            - %belousov.chat.user_class%

In "belousov.chat.user_class:" 中，您需要插入您的 User 类的路径

最后，您需要在数据库中创建表

$ php app/console doctrine:schema:update --force

使用

控制器

如果您需要在页面上使用聊天，您只需传递多个变量即可

users - 将可用于消息的用户数组

chatForm - "ChatType" 的 FormType - 在控制器中形成如下

  $actionUrl = $this->generateUrl(
      'belousov_chat_ajax_send_message'
  );

  $chatForm = $this->createForm(ChatType::class, null, array('action' => $actionUrl));

getMessageUrl - 生成的 "belousov_chat_ajax_get_message" URL

$getMessageUrl = $this->generateUrl(
    'belousov_chat_ajax_get_message'
);

currentUser - 当前用户对象，您可以像这样获取用户
```
$this->getUser();
```

您的控制器将看起来像这样

class ChatController extends Controller
{
    /**
     * @Route("/", name="homepage")
     */
    public function indexAction(Request $request)
    {
        $em = $this->getDoctrine()->getManager();

        $users = $em->getRepository(User::class)->findAll();

        $actionUrl = $this->generateUrl(
            'belousov_chat_ajax_send_message'
        );

        $getMessageUrl = $this->generateUrl(
            'belousov_chat_ajax_get_message'
        );

        $chatForm = $this->createForm(ChatType::class, null, array('action' => $actionUrl));

        return $this->render('base.html.twig', array('chatForm' => $chatForm->createView(), 'users' => $users, 'getMessageUrl' => $getMessageUrl, 'currentUser' => $this->getUser()));
    }
}

模板

模板将看起来像这样，您可以根据自己的意愿覆盖此模板。但如果你覆盖了这个模板，你也需要覆盖 jQuery 代码。jQuery 代码如下..

twig 模板

{% if currentUser %}
    <div id="belousovChat" data-author="{{ currentUser.id }}" data-addressee="" data-action="{{ getMessageUrl }}" >
        <div id="belousovMessageZone"></div>
        <div id="belousovFormZone">
            {{ form_start(chatForm) }}
    
                {{ form_widget(chatForm.messageText) }}
    
                {{ form_errors(chatForm) }}
    
            {{ form_end(chatForm) }}
        </div>
    </div>
    <div id="selectUser">
        {% for user in users %}
            {% if user.id != currentUser.id %}
                <a href="" onclick="return false;" data-number="{{ user.id }}" class="changeUser" >{{ user.username }}</a>
            {% endif %}
        {% endfor %}
    </div>
{% else %}
    <p>Войдите на сайт, для доступа к чату</p>
{% endif %}

javascript 代码

JavaScript 使用 jQuery 和 Ajax 请求。您可以根据自己的意愿覆盖此代码。

/**
 * Created by Roman Belousov on 07.04.16.
 */
$(document).ready(function(){
    setInterval(function() {
        if (ajax) { ajax.abort(); }
        getMessage();
    },30000);
    var ajax;
    $('.belousovSendMessage').click(function () {
        var message = $('.belousovMessageText');
        var addressee = $('#belousovChat').attr('data-addressee');
        var url = $('form[name=chat]').attr('action');
        if (addressee == "" || message == "") {
            alert('change dialog');
        }
        $.ajax({
            type: "POST",
            url: url,
            data: {'messageText': message.val(), 'addressee' : addressee},
            cache: "false",
            dataType: "json",
            success: function (response) {
                if (response.error === undefined){
                    message.val('');
                }
            }
        });
    });
    function getMessage(){
        var chat = $('#belousovChat');
        var user_id = chat.attr('data-author');
        var addressee = chat.attr('data-addressee');
        var url = chat.attr('data-action');
        ajax = $.ajax({
            type:'POST',
            url:url,
            data:{'user_id' : user_id, 'addressee_id' : addressee},
            dataType:'json',
            success:function(resp){
                if (resp.error === undefined){
                    var html;
                    resp.forEach(function (item) {
                        if (item.author.id == user_id){
                            html = '<p class="mainUser">'+ item.messageText +'</p>';
                            $('#belousovMessageZone').append(html);
                        }
                        if (item.addressee.id == user_id){
                            html = '<p class="secondUser">'+ item.messageText +'</p>';
                            $('#belousovMessageZone').append(html);
                        }
                    });
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: {'user_id': user_id, 'addressee_id': addressee, 'update' : true},
                        dataType: 'json',
                        success: function (resp) {
                        }
                    });
                }
                setTimeout(function(){
                    getMessage()
                },1000)
            }
        });
    }
    $('.changeUser').click(function () {
        var addressee = $(this).attr('data-number');
        var chat = $('#belousovChat');
        var url = chat.attr('data-action');
        var user_id = chat.attr('data-author');
        chat.attr('data-addressee', addressee);
        $.ajax({
            type: "POST",
            url: url,
            data: {'changeUser' : true, 'user_id' : addressee},
            cache: "false",
            dataType: "json",
            success: function (response) {
                var html;
                $('#belousovMessageZone').html('');
                if (ajax) { ajax.abort(); }
                getMessage();
                if (response) {
                    response.forEach(function (item) {
                        if (item.author.id == user_id){
                            html = '<p class="mainUser">'+ item.messageText +'</p>';
                            $('#belousovMessageZone').append(html);
                        }
                        if (item.addressee.id == user_id){
                            html = '<p class="secondUser">'+ item.messageText +'</p>';
                            $('#belousovMessageZone').append(html);
                        }
                    });
                }
            }
        });
    });
});

此文档包含三种方法

获取消息
发送消息
更改消息的用户

css 样式

您可以根据自己的意愿覆盖此样式，此 CSS 代码仅作为示例

    #belousovChat {
        width:200px;
        height:300px;
        border:1px solid #ccc;
        padding:0;
    }
    #belousovMessageZone {
        height:200px;
        padding:0;
        margin:auto;
        width:100%;
        border-bottom:1px solid #ccc;
        overflow-y: auto;
    }
    #belousovMessageZone p {
        padding:5px;
        margin:auto;
        width:90%;
    }
    #belousovMessageZone .mainUser {
        text-align:left;
    }
    #belousovMessageZone .secondUser {
        text-align:right;
    }
    #belousovFormZone {
        height:95px;
        margin:auto;
        padding:0;
        width:100%;
    }
    #belousovFormZone form {
        margin:10px;
    }
    #belousovFormZone form textarea {
        width:90%;
    }

作者

如果您有任何问题或发现错误，请通过我的邮箱向我发送消息

Roman Belousov。邮箱： romanandreyvich@gmail.com

belousovr / belousovchatbundle

维护者

详细信息