从我看来,我认为无限
while循环是这里的问题。
PHP和套接字
如果您不能使用NodeJS,请尝试使用带套接字的PHP。应该可以很好地工作!
改进之处
您说您正在寻找改进。他们来了。
另外,我将使用Angular将从服务器检索的数据绑定到视图。
查看文件
<html> <head> <title></title> {{ HTML::script('//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js') }} <style> #chat { width: 300px; } #input { border: 1px solid #ccc; width: 100%; height: 30px; } #messages { padding-top: 5px; } #messages > div { background: #eee; padding: 10px; margin-bottom: 5px; border-radius: 4px; } </style> </head> <body> <div id="chat"> <input id="input" type="text" name="message" value=""> <div id="messages"> </div> </div> <script> var $messagesWrapper = $('#messages'); // Append message to the wrapper, // which holds the conversation. var appendMessage = function(data) { var message = document.createElement('div'); message.innerHTML = data.body; message.dataset.created_at = data.created_at; $messagesWrapper.append(message); }; // Load messages from the server. // After request is completed, queue // another call var updateMessages = function() { var lastMessage = $messagesWrapper.find('> div:last-child')[0]; $.ajax({ type: "POST", url: '{{ url('chat/refresh') }}', data: { from: ! lastMessage ? '' : lastMessage.dataset.created_at }, success: function(messages) { $.each(messages, function() { appendMessage(this); }); }, error: function() { console.log('Ooops, something happened!'); }, complete: function() { window.setTimeout(updateMessages, 2000); }, dataType: 'json' }); }; // Send message to server. // Server returns this message and message // is appended to the conversation. var sendMessage = function(input) { if (input.value.trim() === '') { return; } input.disabled = true; $.ajax({ type: "POST", url: '{{ url('/chat') }}', data: { message: input.value }, success: function(message) { appendMessage(message); }, error: function() { alert('Ooops, something happened!'); }, complete: function() { input.value = ''; input.disabled = false; }, dataType: 'json' }); }; // Send message to the servet on enter $('#input').on('keypress', function(e) { // Enter is pressed if (e.charCode === 13) { e.preventDefault(); sendMessage(this); } }); // Start loop which get messages from server. updateMessages(); </script> </body></html>路线
Route::post('chat/refresh', function() { $from = Input::get('from', null); if (is_null($from)) { $messages = Message::take(10); } else { $messages = Message::where('created_at', '>', $from); } return $messages->latest()->get();});Route::post('chat', function() { return Message::create(['body' => Input::get('message')]);});Route::get('chat', function() { return View::make('chat');});模型
class Message extends Eloquent{ protected $fillable = ['body'];}我认为,代码很简单……注释应能解释所有内容。



