Реализация чата встроенной поддержки

Мы создаем систему поддержки в чате. В настоящее время, если посетитель нажимает кнопку живого чата, открывается новое окно, и пользователь может поговорить со своим. Я пытаюсь открыть встроенное окно чата, как эта ссылка: http://anantgarg.com/chat/sampleb.php

Обратите внимание, что мы создаем систему чата поддержки, а не систему однорангового чата, как подразумевается по ссылке выше.

Проблема, с которой мы сталкиваемся здесь, заключается в том, как мы сможем получить доступ к базе данных, расположенной на другом сервере (нашем сервере), а не на сервере, на котором расположен веб-сайт нашего клиента. Приведенное выше решение может нормально работать, если мы находимся на одном сервере. Итак, подскажите, как преодолеть это препятствие.

Спасибо.


ajax chat live livechat
person anwartheravian    schedule 08.05.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что для решения вашей задачи вы можете использовать WebSockets, он поддерживает междоменные соединения.

В вашем случае вы можете написать клиентскую часть чата и разместить его на сайте клиента, но запрос от него будет обрабатываться вашим сервером с доступом к БД.

Продлевать

Конечно, вы можете использовать JSON с WebSockets так же, как JSON с AJAX. WebSockets — это транспорт — JSON — это контент, передаваемый этим транспортом.

Я пишу этот код, когда исследую WebSockets (сторона чата):

function connect(){
    var socket;
    var host = window.location.host;
    var wsUrl = "ws://" + host + "/connect";

    try{
        var socket = new WebSocket(wsUrl);
        message('<p class="event">Socket Status: '+socket.readyState);
        socket.onopen = function(){
            message('<p class="event">Socket Status: '+socket.readyState+' (open)');
            //Run "Ping-Pong" for support connection
            setTimeout(pingPong, 5000);
        }

        socket.onmessage = function(msg){
            //Parse server answer from string to JSON object
            var answer = JSON.parse(msg.data);
            if (answer.type == 'message') {
                message('<p class="message">'+answer.user+': '+answer.message);
            }
        }

        socket.onclose = function(){
            message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');
        }           

    } catch(exception){
        message('<p>Error'+exception);
    }

    function send(){
        var text = $('#text').val();
        if(text==""){
            message('<p class="warning">Please enter a message');
            return ;    
        }
        try{
            //Send data via JSON
            socket.send('{"type": "message", "message":'+JSON.stringify(text)+'}');
        } catch(exception){
            message('<p class="warning">');
        }
        $('#text').val("");
    }
    var token = 0;
    function pingPong()
    {
        token++;
        try{
            var msg = {'type': 'ping', 'token': token};
            socket.send(JSON.stringify(msg));
            setTimeout(pingPong, 5000);
        } catch(exception){
            message('<p class="warning">');
        }

    }

    function message(msg){
        $('#chatLog').append(msg+'</p>');
    }//End message()

    $('#text').keypress(function(event) {
              if (event.keyCode == '13') {
                 send();
               }
    }); 

    $('#disconnect').click(function(){
        socket.close();
    });

}


$(document).ready(function() {

    if(!("WebSocket" in window)){
        $('#chatLog, input, button, #examples').fadeOut("fast");    
        $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');     
    }else{
        //The user has WebSockets
        connect();
    }
});
</script>
<meta charset=utf-8 />
<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif;}
#container{
    border:5px solid grey;
    width:800px;
    margin:0 auto;
    padding:10px;
}
#chatLog{
    padding:5px;
    border:1px solid black; 
}
#chatLog p{margin:0;}
.event{color:#999;}
.warning{
    font-weight:bold;
    color:#CCC;
}
</style>
<title>WebSockets Client</title>

</head>
<body>
  <div id="wrapper">

    <div id="container">

        <h1>WebSockets Client</h1>

        <div id="chatLog">

        </div>
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>

        <input id="text" type="text" />
        <button id="disconnect">Disconnect</button>

    </div>

  </div>
</body>
</html>​

Также вы можете использовать для этого библиотеку SocketIO, но я не уверен, что она работает с несколькими доменами.

person Eugene    schedule 08.05.2013
comment
Спасибо за ваш ответ, Евгений. Можем ли мы также использовать для этого JSON вместо WebSockets? Или мы можем использовать оба? - person anwartheravian; 08.05.2013