php 使用Pusher在PHP中创建的实时聊天应用程序:https://www.cloudways.com/blog/real-time-chat-app-php/

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了php 使用Pusher在PHP中创建的实时聊天应用程序:https://www.cloudways.com/blog/real-time-chat-app-php/相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<head>	
	<title>Pusher Test</title>	
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
	

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript" ></script>	
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript" ></script>	
<script src="//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.3.0/bootbox.min.js" type="text/javascript" ></script>				
	
<style = "text/css">	
.messages_display {height: 300px; overflow: auto;}		
.messages_display .message_item {padding: 0; margin: 0; }		
.bg-danger {padding: 10px;}	
</style>		
</head>
<body>

<br />	

<!--Form Start-->
<div class = "container">		
	<div class = "col-md-6 col-md-offset-3 chat_box" id="chatbox">						
		<div class = "form-control messages_display"></div>			
		<br />						
		<div class = "form-group">						
			<input type = "text" class = "input_name form-control" placeholder = "Enter Name" />			
		</div>						
		<div class = "form-group">						
			<textarea class = "input_message form-control" placeholder = "Enter Message" rows="5"></textarea>			
		</div>						
		<div class = "form-group input_send_holder">				
			<input type = "submit" value = "Send" class = "btn btn-primary btn-block input_send" />			
		</div>					
	</div>	

<!--form end-->
	
	<script type="text/javascript">			
	
// Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;
// Add API Key & cluster here to make the connection 
var pusher = new Pusher('42894ae311bfba3b7465', {
    cluster: 'ap2',
    encrypted: true
});
// Enter a unique channel you wish your users to be subscribed in.
var channel = pusher.subscribe('test_channel');
// bind the server event to get the response data and append it to the message div
channel.bind('my_event',
    function(data) {
        //console.log(data);
        $('.messages_display').append('<p class = "message_item">' + data + '</p>');
        $('.input_send_holder').html('<input type = "submit" value = "Send" class = "btn btn-primary btn-block input_send" />');
        $(".messages_display").scrollTop($(".messages_display")[0].scrollHeight);
    });
// check if the user is subscribed to the above channel
channel.bind('pusher:subscription_succeeded', function(members) {
    console.log('successfully subscribed!');
});
// Send AJAX request to the PHP file on server 
function ajaxCall(ajax_url, ajax_data) {
    $.ajax({
        type: "POST",
        url: ajax_url,
        //dataType: "json",
        data: ajax_data,
        success: function(response) {
            console.log(response);
        },
        error: function(msg) {}
    });
}
// Trigger for the Enter key when clicked.
$.fn.enterKey = function(fnc) {
    return this.each(function() {
        $(this).keypress(function(ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        });
    });
}
// Send the Message enter by User
$('body').on('click', '.chat_box .input_send', function(e) {
    e.preventDefault();
    var message = $('.chat_box .input_message').val();
    var name = $('.chat_box .input_name').val();
    // Validate Name field
    if (name === '') {
        bootbox.alert('<br /><p class = "bg-danger">Please enter a Name.</p>');
    } 
	else if (message !== '') {
        // Define ajax data
        var chat_message = {
            name: $('.chat_box .input_name').val(),
            message: '<strong>' + $('.chat_box .input_name').val() + '</strong>: ' + message
        }
        //console.log(chat_message);
        // Send the message to the server passing File Url and chat person name & message
        ajaxCall('http://phpstack-71265-406587.cloudwaysapps.com/message_relay.php', chat_message);
        // Clear the message input field
        $('.chat_box .input_message').val('');
        // Show a loading image while sending
        $('.input_send_holder').html('<input type = "submit" value = "Send" class = "btn btn-primary btn-block" disabled /> &nbsp;<img     src = "loading.gif" />');
    }
});
// Send the message when enter key is clicked
$('.chat_box .input_message').enterKey(function(e) {
    e.preventDefault();
    $('.chat_box .input_send').click();
}); 
</script>
</div>
</body>

以上是关于php 使用Pusher在PHP中创建的实时聊天应用程序:https://www.cloudways.com/blog/real-time-chat-app-php/的主要内容,如果未能解决你的问题,请参考以下文章

为在 PHP 中创建的图像添加边框

将一个函数中创建的 PHP 变量传递给另一个函数

在 PHP 中,为啥可以在同一类类型的方法中创建的新实例上调用私有方法? [复制]

使用 Ratchet Websockets 进行 PHP 实时聊天

如何使用 PHP 在 openfire 中创建聊天室并将用户添加到房间中

如何链接在php mysql中创建的RSS feed