proekton.com/assets/js/chat.js

/**
 * Created by mukhtar on 04.07.16.
 */

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

var SocketHandler = function () {
    var url = 'ws://127.0.0.1:8888/chat';
    var sock = new WebSocket(url);
    var intervalId;
    sock.onopen = function () {
        console.log("Start connect");
        intervalId = setInterval(function () {
            sock.send('{"dummy": 1}');
        }, 150000);
    };
    sock.onmessage = function (event) {
        console.log(event.data);
        alert(event.data);
        var message = JSON.parse(event.data);
        var inbox = document.getElementById('message-chat-space');
        inbox.innerHTML += '<div class="col-lg-12 insetCommChat"><div class="topCommChat">' +
            '<p class="nameCommChat">Иванов</p> <span>13.0.2016</span></div>' +
            '<p class="textCommChat">' + message.msg + '</p></div>';

    };

    this.send_contact_message = function (userId) {
        var data = {
            "format_type": "add_message",
            "user_id": userId
        }
        sock.send(JSON.stringify(data));
        console.log(data);
    };

    this.add_contact_message = function (messageData) {
        console.log(messageData);
        sock.send(JSON.stringify(messageData));
    };

    this.send_message = function (form) {
        var elements = form.elements;
        var data = {};
        var i = 0;
        for (var i; i < elements.length; i++) {
            if (elements[i].name == 'message') {
                data[elements[i].name] = elements[i].value;
            }
        }
        sock.send(JSON.stringify(data));
        var textareaMessage = document.getElementById("message");
        textareaMessage.value = "";

    }

}

$(function () {
    var socket = new SocketHandler();
    var form = document.getElementById('message_form');
    var csrftoken = getCookie('csrftoken');

    // Вытащить сообщения для чата заказа
    $('.order-block').on('click', function () {
        var orderId = $(this).attr('data-id');
        $("#chat-contractor-order #orderId").val(orderId);
        var inbox = document.getElementById('message-chat-order-space');
        inbox.innerHTML = '';
        $.ajax({
            url: '/api/message',
            type: 'GET',
            data: {csrfmiddlewaretoken: csrftoken, 'order': orderId},
            dataType: 'json',
            success: function (json) {
                $.each(json.results, function (i, v) {
                    inbox.innerHTML += '<div class="col-lg-12 insetCommChat"><div class="topCommChat">' +
                        '<p class="nameCommChat">Иванов</p> <span>13.0.2016</span></div>' +
                        '<p class="textCommChat">' + v.text + '</p></div>';
                });
            }
        });

    });

    // Вытащить сообщения для конактов
    $('.user-block').on('click', function () {
        var userId = $(this).attr('data-id');
        $("#contact-chat-form #recipentId").val(userId);
        var inbox = document.getElementById('message-chat-space');
        inbox.innerHTML = '';
        $.ajax({
            url: '/api/message',
            type: 'GET',
            data: {csrfmiddlewaretoken: csrftoken, 'recipent__id': userId},
            dataType: 'json',
            success: function (json) {
                $.each(json.results, function (i, v) {
                    console.log(v.sender.id);
                    console.log(v.recipent.id);
                    inbox.innerHTML += '<div class="col-lg-12 insetCommChat"><div class="topCommChat">' +
                        '<p class="nameCommChat">Иванов</p> <span>13.0.2016</span></div>' +
                        '<p class="textCommChat">' + v.text + '</p></div>';
                });
            }
        });

    });

    // Добавить сообщение для контакта
    $('#contact-chat-add-message').on('click', function () {
        var chatMessage = $("#chat").val();
        var recipentId = $("#recipentId").val();
        var senderId = $("#senderId").val();

        socket.add_contact_message({
            "format_type": "add_message_contact",
            "data": {
                "sender_id": senderId,
                "recipent_id": recipentId,
                "chat_message": chatMessage,
            }
        });

        $("#chat").val("");
    });


});