Question

我们正在创建一个实时聊天支持系统。目前，如果访问者点击实时聊天按钮，则会打开一个新窗口，用户可以与他们交谈。我想要完成的是像这个链接一样打开内联的聊天窗口： http://anantgarg.com/chat/sampleb.php

请注意，我们正在构建支持聊天系统而不是上述链接所针对的聊天系统。

我们面临的问题是，我们如何能够访问位于不同服务器（我们的服务器）上的数据库，而不是访问我们客户网站所在的服务器。如果我们在同一台服务器上，上述解决方案可以正常工作。所以，请建议如何克服这个障碍。

感谢。

Answer 1

我认为，为了解决您的任务，您可以使用WebSockets，它支持跨域连接。

在您的情况下，您可以编写聊天客户端并将其放在cliet的网站上，但是来自它的请求将由您的服务器处理并具有数据库访问权限。

扩展

当然，您可以将JSON与WebSockets一起使用，就像使用AJAX的JSON一样。 WebSockets是传输 - JSON是通过此传输传递的内容。

我在reserarch WebSockets（聊天lietn方面）时写这段代码：

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库，但我不确定它是否跨域工作。

内联支持聊天实现

1 个答案:

扩展