私はチャットを書くことはとても複雑だったと思っていました。 PHP
,MYSQL
、JQuery
で簡単に実装できます。 Node.js
とSocket
はもちろん素晴らしい技術です(そして、ほとんどの場合、これが推奨されます)が、より初歩的なレベルでのプロセスを理解したい場合は、こちらをご覧ください。どのように動作するかを理解できるようにする非常に基本的なコードです。
config.phpの
if (session_status() == PHP_SESSION_NONE) {
session_start();
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'root');
define('DB_DATABASE', 'mydb');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
}
chat_view.php
//display chat messages
<div id="displayMessage" class="displayMessage">
<?php
$sqlchat="SELECT * FROM chatroom c
LEFT JOIN users u ON c.userID=u.user_id
WHERE chatroom.chatKey='$chatKey' ORDER BY chat_id DESC";
ORDER BY chat_id DESC";
$resultchat= mysqli_query($db,$sqlchat);?>
<?php if(mysqli_num_rows($resultchat) == 0): ?>
<h3 >No messages. Start conversation.</h3>
<?php elseif(mysqli_num_rows($resultchat) > 0): ?>
<?php while($chat=mysqli_fetch_array($resultchat)){ ?>
<div class="row" style="padding:4%;">
<p><?=$chat['username'];?>
<?=$chat['datetime'];?></p>
<div class="bubble"><?=$chat['message'];?></div>
</div>
<?php };?>
<?php endif;?>
</div>
//write message area
<div id="writeMessage" class="writeMessage">
<form id="chatForm" action="chat_insert.php" method="post">
<input id='message' name="message" type="text"
placeholder="Write message here... Then hit enter on your keyboard to send"/>
<input id='date_now' name='date_now' type="hidden" value="">
<input type='hidden' id="fromUsername" name="fromUsername"
value='<?php echo $session_username;?>'>
<input id="buttons" type="submit"
style="position: absolute; left: -9999px; width: 1px; height:1px;" tabindex="-1"/>
</form>
</div>
jQueryの挿入スクリプト
$(document).ready(function(){
$("#buttons").click(function(){
//collect variables
var chatKey = $("#chatKey").val();//assign a chatKey per chatroom
var message= $("#message").val();
var date_now= $("#date_now").val();
var fromUsername= $("#fromUsername").val();
// store in database.
var dataString = 'chatKey='+ chatKey+'message='+ message+'&date_now='+ date_now + '&fromUsername='+ fromUsername;
// AJAX Send form without refreshing page
$.ajax({
type: "POST",
url: "chat_insert.php",
data: dataString,
cache: true,
success: function(response){
$(".displayMessage").html(response);//display message back to user
$("#chatForm").trigger("reset");//reset text area
}
});
return false;
});
});
jQueryのは、のsetInterval()
$(document).ready(function(e){
var chatKey = $("#chatKey").val();
var data ='chatKey='+ chatKey;
setInterval(function(){
$.ajaxSetup({
cache:false,
type: "GET",
url: "chatlog.php",
data: data,
});
$('.displayMessage').load('chatlog.php');
}, 3000); //check database every 30 seconds to see if there are new messages
});
chat_insert.php
// set parameters and execute
$chatKey = $_POST['chatKey'];
$fromUsername = $_POST['fromUsername'];
$message= $_POST['message'];
$date_now= $_POST['date_now'];
// prepare and bind
$insertchat= $db->prepare("INSERT INTO chatroom (datetime,username,message,chatKey) VALUES (?,?,?,?)");
$insertchat->bind_param("ssss",$date_now,$fromUsername,$message,$chatKey);
$insertchat->execute() or die(mysqli_error($db));
//display back to chat_view.php
$sqlchat="SELECT * FROM chatroom c
LEFT JOIN users u ON c.userID=u.user_id
ORDER BY chat_id DESC";
$resultchat= mysqli_query($db,$sqlchat);
$result= '';
while($chat=mysqli_fetch_array($resultchat)){
$result .= '<div class="row" style="padding:4%;">';
$result .= '<p>';
$result .= $chat['username'].' '.$chat['datetime'];
$result .= '</p> <div class="bubble">';
$result .= $chat['message'];
$result .= '</div></div>';
}
echo $result;
$db->close();
chatlog.phpを用いてリアルタイムで新しいチャットをフェッチ
$chatKey= $_GET['chatKey'];
$sqlchat="SELECT * FROM chatroom LEFT JOIN users u ON c.userID=u.user_id
WHERE chatroom.chatKey='$chatKey' ORDER BY chat_id DESC";
$resultchat= mysqli_query($db,$sqlchat);
$result= '';
while($chat=mysqli_fetch_array($resultchat)){
$result .= '<div class="row" style="padding:4%;">';
$result .= '<p>';
$result .= $chat['username'].' '.$chat['datetime'];
$result .= '</p> <div class="bubble">';
$result .= $chat['message'];
$result .= '</div></div>';
}
echo $result;
$db->close();
}
フロントエンドアプリケーションとのNodejs Rest APIとソケット接続の作成、保存にPHPを使用 – underscore