mknhirojp / TeamChat

Build a Public Team Chat System

The Unlicense

0 stars 0 forks source link

How to Create a Simple Web-Based Chat Application #3

Open mknhirojp opened 2 years ago

mknhirojp commented 2 years ago

CSS入門：要素を左右・上下中央に配置する方法 https://proengineer.internous.co.jp/content/columnfeature/6343

公開日：2016年12月05日最終更新日：2021年12月27日

HTMLのレイアウトでよく使われるインライン要素やブロックレベルの要素の中央寄せについて解説します。要素を上下左右に配置する方法はいくつかありますので少し紛らわしいかもしれませんが、一つ一つサンプルコードと共に説明しますので実際にファイルを保存して動作を確認してみて下さい。

1. 要素を中央に配置する前に確認すること 2. インライン要素を左右中央に配置する【text-align】 3. ブロックレベル要素を左右中央に配置する【margin】 4. インライン要素を上下中央に配置する【vertical-align】 5. ブロックレベル要素を上下中央に配置する 6. flexboxを使ってインライン要素を上下中央に配置する 7. flexboxを使ってブロックレベル要素を上下中央に配置する

要素をの中央に配置する前に確認すること要素を中央に配置する前に、その要素がインライン要素かブロックレベルの要素かを把握しておく必要があります。中央に寄せたい要素が「ブロックレベル」か「インライン」かで記述するCSSが違ってきます。

1.1. ブロックレベル要素「ブロックレベル要素」とは、HTML文書の中で一つのブロックとして認識される要素です。見出し要素、段落要素、テーブル要素などが「ブロックレベル要素」にあたります。

【ブロックレベル要素の例】

タグ、

タグ、

～

タグ、
タグ、タグ、
タグ、
タグブロックレベル要素の前後には、改行が入ります。そのためインライン要素が複数並んだ場合、要素は"ブロック"を積み上げるように縦方向に配置されます。 1.2. インライン要素「インライン要素」とは、"ブロックレベル要素"内のコンテンツとして用いられる要素です。divタグやpタグ（段落）内のテキストやアンカータグ()など、要素の一部として扱われますので通常インライン要素の前後に改行が入ることはありません。【インライン要素の例】タグ、タグ、タグ、タグ、タグ、
タグ、タグ、タグ、タグインライン要素が複数並んだ場合、要素は横並び（インライン）に配置されます。 [▲ページトップへ戻る](https://proengineer.internous.co.jp/content/columnfeature/6343#section001)[](https://proengineer.internous.co.jp/topics/wp-content/uploads/2016/12/css_center1.png) 2. インライン要素を左右中央に配置する【text-align】まずは比較的簡単なインライン要素の左右（横方向）中央寄せを「text-align」プロパティを使って記述してみましょう。「center1.html」をPC上の任意の場所に保存して確認してみましょう。ファイルの形式は「utf-8」で保存します。 ●基本の書式 ●center1.html CSS入門->要素を中央に配置する
要素のセンタリング

インライン要素を左右中央寄せにする
「border」プロパティと「background」プロパティは中央の配置をわかりやすく表示するために記述しました。「text-align」プロパティが、インライン要素の配置を調節するのに使われるプロパティです。"center"を指定するとインライン要素を中央寄せにします。 ●ブラウザーの表示(center1.html) CSS入門：要素を左右・上下中央に配置する方法【フリーランスエンジニア案件情報 | プロエンジニア】 [▲ページトップへ戻る](https://proengineer.internous.co.jp/content/columnfeature/6343#section001)[](https://proengineer.internous.co.jp/topics/wp-content/uploads/2016/12/css_center2.png) 3. ブロックレベル要素を左右中央に配置する【margin】次にインライン要素のテキストを中央に配置したまま、ブロックレベル要素を左右中央に寄せてみましょう。 ●基本の書式 ●center2.html CSS入門->要素を中央に配置する
要素のセンタリング

ブロックレベル要素を左右中央寄せにする
「margin」プロパティに「0px auto」を指定することでブロックレベル要素を中央寄せしています。ブラウザーの大きさを変えてみて下さい。ブラウザーの横幅が変わってもdivタグの位置は常に中央に配置されているはずです。 ●ブラウザーの表示(center2.html) CSS入門：要素を左右・上下中央に配置する方法【フリーランスエンジニア案件情報 | プロエンジニア】 [▲ページトップへ戻る](https://proengineer.internous.co.jp/content/columnfeature/6343#section001)[](https://proengineer.internous.co.jp/topics/wp-content/uploads/2016/12/css_center3.png) 4. インライン要素を上下中央に配置する【vertical-align】要素の横方向の中央寄せは、比較的簡単に実現できましたが、縦方向、上下の中央寄せは少し工夫が必要です。インライン要素に対しては、幅（widthプロパティ）や高さ（heightプロパティ）の指定ができず、余白も上下の幅を指定することはできません。その為インライン要素をブロックとして扱ったり、テーブルセル化することで高さを指定することができるので、上下の幅に対するセンタリングを実現することが可能になります。 ●基本の書式 ●center3.html CSS入門->要素を中央に配置する
要素のセンタリング

インライン要素を左右・上下中央寄せにする。
「verical-align」プロパティを使って上下の配置を調節します。"middle"を指定することで上下縦方向の中央寄せをします。このプロパティはインライン要素とテーブルセルに有効ですが、ブロックレベル要素に適用することはできません。またブロックレベル要素内のテキストについても配置を調節することができないため、要素をテーブルセル化することのできる「display: table-cell」を使って上下の中央寄せを実現します。 ●ブラウザーの表示(center3.html) CSS入門：要素を左右・上下中央に配置する方法【フリーランスエンジニア案件情報 | プロエンジニア】 [▲ページトップへ戻る](https://proengineer.internous.co.jp/content/columnfeature/6343#section001)[](https://proengineer.internous.co.jp/topics/wp-content/uploads/2016/12/css_center4.png)[](https://proengineer.internous.co.jp/topics/wp-content/uploads/2016/12/css_center5.png) 5. ブロックレベル要素を上下中央に配置する「ブロックレベル要素」を上下中央に寄せるには、色々な方法がありますが、前節で解説した「vertical-align」プロパティを使ってブロックレベル要素を中央に配置する方法について説明します。少しコードが長くなりましたが一つずつみてゆきましょう。 ●基本の書式 ●center4.html CSS入門->要素を中央に配置する
要素のセンタリング

ブロックレベル要素を左右・上下中央寄せにする。

ブロックレベル要素の上下中央寄せについても少し工夫が必要です。「center3.html」で記述したインライン要素の上下左右を中央に配置するsampleセレクタはそのまま使用しています。ブロック要素のボックスの大きさを少し小さくしていますが、このブロックを入れ子にしたdivタグ内のなかで上下左右に配置する方法について説明します。 CSSは「wrap1」セレクタと「wrap2」セレクタを用意します。「wrap1」を指定した要素内で左右上下の中央寄せを指定します。「wrap2」には要素をインライン要素化する「display:inline-block;」が記述されています。「sample」セレクタを指定したdivタグをインライン要素化することで、ブロックレベル要素を左右上下中央に配置します。実際にブロックレベルの中央寄せをしているのは「Wrap1」セレクタの「padding: 50px;」と「text-align: center;」になります。 ●ブラウザーの表示(center4.html) CSS入門：要素を左右・上下中央に配置する方法【フリーランスエンジニア案件情報 | プロエンジニア】少しわかりずらいので「Wrap2」のブロックレベル要素を表示してみましょう。 ●center5.html ●ブラウザーの表示(center5.html) CSS入門：要素を左右・上下中央に配置する方法【フリーランスエンジニア案件情報 | プロエンジニア】赤の点線で囲まれたブロックレベルの要素がインライン化した要素になります。この要素に対して左右の中央寄せや上下中央の配置を指定しています。 [▲ページトップへ戻る](https://proengineer.internous.co.jp/content/columnfeature/6343#section001)[](https://proengineer.internous.co.jp/topics/wp-content/uploads/2017/04/css_flexbox2-1.png) 6. flexboxを使ってインライン要素を上下中央に配置する要素を上下中央に寄せる方法はいくつかあります。ブロックレベルの上下中央５章で紹介した「display」プロパティに”inline-block”を指定して配置を調整する方法も使われてきましたが、CSS3の「flexbox」レイアウトモデルを使うと、インライン要素もブロックレベル要素も少ないコード量で分かりやすくCSSを記述する事ができます。「flexbox」では、レイアウトの為の「flexコンテナ」と呼ばれる箱を用意して、その中の要素を調節するプロパティで配置を調節したり、要素間の余白を調節したりします。「flexコンテナ」に属する子要素を「flexアイテム」と呼びます。具体的なサンプルコードを見てみましょう。 ●center5.html ボックスレイアウト

インライン要素の中央寄せです。

「display」プロパティに"inline-flex"を指定する事で、「flexコンテナ」を作成します。div要素の子要素である段落(pタグ)が子要素の「flexアイテム」ということになります。縦方向の配置を「justify-content」プロパティを使い、横方向の配置に「align-items」プロパティを使って段落要素の中央寄せを実現しています。 ●ブラウザーの表示(center5.html) CSS入門：要素を左右・上下中央に配置する方法【フリーランスエンジニア案件情報 | プロエンジニア】 [▲ページトップへ戻る](https://proengineer.internous.co.jp/content/columnfeature/6343#section001)[](https://proengineer.internous.co.jp/topics/wp-content/uploads/2017/04/css_flexbox2-2.png) 7. flexboxを使ってブロックレベル要素を上下中央に配置する次に同じ「flexbox」のレイアウトモデルを使って、ブロックレベルの上下中央寄せのコードを確認してゆきましょう。「center6.html」をPC上の任意の場所に保存して下さい。サンプルコードの画像はHTMLファイルと同一フォルダー階層の「image」フォルダー内に保存してあります。 ●center6.html ボックスレイアウト

ブロックレベルのレイアウトを調節します。

インラインレベルの要素と同じく「display」プロパティを使います。値に”flex”と指定して、ブロックレベルの要素の上下中央寄せをします。上下中央寄せの指定をするプロパティはインラインレベルでも使った「justify-content」プロパティと「align-items」プロパティです。 ●ブラウザーの表示(center6.html) CSS入門：要素を左右・上下中央に配置する方法【フリーランスエンジニア案件情報 | プロエンジニア】 [▲ページトップへ戻る](https://proengineer.internous.co.jp/content/columnfeature/6343#section001)
mknhirojp commented 2 years ago

Step 4: Handling User Input
After a user submits our form, we want to grab their input and write it to our chat log. In order to do this, we must use jQuery and PHP to work synchronously on the client and server sides.
Advertisement
jQuery
Almost everything we are going to do with jQuery to handle our data will revolve around the jQuery post request.
1234567 | //If user submits the form$("#submitmsg").click(function () { var clientmsg = $("#usermsg").val(); $.post("post.php", { text: clientmsg }); $("#usermsg").val(""); return false;}); -- | --
The code that goes into style.css is already available in Step 2 of the tutorial.
If the code you have does not seem to be working, make sure it matches the code provided here. Please note that all three files—index.php, post.php, and style.css—are located in the same directory.
Awesome Online Chat PHP Scripts From CodeCanyon
Would you rather download an online chat PHP script instead of creating one yourself? Then you'll want to check out these premium templates from CodeCanyon:
1. Live Chat Unlimited
Live Chat Unlimited is a bestselling simple PHP chat box for a reason. It's very lightweight to keep your site load speeds down and can be installed on unlimited domains. The online chat PHP script also offers multi-lingual support through the WPML and Polylang plugins. You can also enable email notifications so you can be ready to chat with visitors.
2. TotalDesk: Helpdesk, Live Chat, Knowledge Base and Ticket System
TotalDesk is a complete help desk solution for your business. Not only does it let you make your own chat box, but it also includes a ticket and notification system, among other things. You can create a searchable knowledge base for your site's visitors, so they can solve common problems on their own. TotalDesk also integrates well with WooCommerce and Slack.
3. XeroChat: Facebook Chatbot, eCommerce and Social Media Management Tool
If Facebook Messenger is part of your business's marketing strategy, you'll want to learn about XeroChat. It's designed with the messaging platform in mind and integrates well with it. This online chat PHP script lets you build responsive and interactive chatbots with ease. It's so fully featured that you can even set up eCommerce stores with the included code. Add XeroChat to your online business strategies.
4. Chat Support Board: PHP Chat Application
Finally, there's Support Board, a PHP chat script that uses artificial intelligence to help serve your customers. Communicate directly with your audience with ease thanks to its smooth integration with other platforms. You'll save time and increase engagement with this simple PHP chat box.
Even More PHP Script Templates
PHP forms and scripts are a great way to round out your website. If you're looking for more templates that will save you time, check out some of these items from Envato:
PHP
11 Best PHP Help-Desk Scripts and 5 Free Options
Franc Lucas
PHP
17 Best CRM & Project Management PHP Scripts (With 5 Free)
Franc Lucas
PHP
10 Best PHP Chat Scripts on CodeCanyon
Franc Lucas
PHP
19 Best PHP Event Calendar and Booking Scripts... and 3 Free Options
Monty Shokeen
Learn About PHP Scripts From Envato Tuts+
Are you looking to learn even more about the PHP scripting language? Then Envato Tuts+ is the best place to start (and finish). Our talented instructors have put together many PHP courses, tutorials, and guides that you can use to grow your knowledge base. Here are a few to get you started:
PHP
Create a Contact Form in PHP
Monty Shokeen
PHP
How to Replace Strings in PHP
Monty Shokeen
PHP
How to Use PHP in HTML
Sajal Soni
PHP
How to Work With Cookies in PHP
Sajal Soni
Finished
We are finished! I hope that you learned how a basic chat system works, and if you have any suggestions on anything, I'll happily welcome them. This chat system is a simple as you can get with a chat application. You can work off this and build multiple chat rooms, add an administrative back end, add emoticons, etc. The sky is the limit!
Also, if you need a professional app or plugin for your next project, you can take a look at one of the many chat scripts we have for sale on CodeCanyon.
Below are a few links you might want to check out if you are thinking of expanding this chat application:
Secure Your Forms With Form Keys: prevent XSS (cross-site scripting) and cross-site request forgery.
Submit a Form Without Page Refresh Using jQuery: expand on our AJAX request.
How to Make AJAX Requests With Raw JavaScript: learn how requests work behind the scenes with raw JavaScript.
This post has been updated with contributions from Monty Shokeen and Nathan Umoh. Monty is a full-stack developer who also loves to write tutorials, and to learn about new JavaScript libraries. Nathan is a staff writer for Envato Tuts+.

Step 4: Handling User Input After a user submits our form, we want to grab their input and write it to our chat log. In order to do this, we must use jQuery and PHP to work synchronously on the client and server sides. Advertisement jQuery Almost everything we are going to do with jQuery to handle our data will revolve around the jQuery post request. 1 2 3 4 5 6 7 //If user submits the form $("#submitmsg").click(function () { var clientmsg = $("#usermsg").val(); $.post("post.php", { text: clientmsg }); $("#usermsg").val(""); return false; }); Before we do anything, we must grab the user's input, or what the user has typed into the #submitmsg input. This can be achieved with the val() function, which gets the value set in a form field. We now store this value in the clientmsg variable. Here comes our most important part: the jQuery post request. This sends a POST request to the post.php file that we will create in a moment. It posts the client's input, or what has been saved into the clientmsg variable. Lastly, we clear the #usermsg input by setting the value attribute to blank. Please note that the code above will go into our script tag, where we placed the jQuery logout code. PHP: The post.php File At the moment, we have POST data being sent to the post.php file each time the user submits the form and sends a new message. Our goal now is to grab this data and write it into our chat log. 01 02 03 04 05 06 07 08 09 10 ".date("g:i A")." ".$_SESSION['name']." ".stripslashes(htmlspecialchars($text))."
"; file_put_contents("log.html", $text_message, FILE_APPEND | LOCK_EX); } ?> Before we do anything, we have to start the post.php file with the session_start() function as we will be using the session of the user's name in this file. Using the isset boolean, we check if the session for 'name' exists before doing anything else. We now grab the POST data that was being sent to this file by jQuery. We store this data into the $text variable. This data, like all the overall user input data, will be stored in the log.html file. We simply use the file_put_contents() function to write all the data to the file. The message we will be writing will be enclosed inside the .msgln div. It will contain the date and time generated by the date() function, the session of the user's name, and the text, which is also surrounded by the htmlspecialchars() function to prevent XSS. Step 5: Displaying the Chat Log Contents Everything the user has posted is handled and posted using jQuery; it is written to the chat log with PHP. The only thing left to do is to display the updated chat log to the user with log.php. In order to save ourselves some time, we will preload the chat log into the #chatbox div if it has any content. 1 2 3 4 5 6 7
0){ $contents = file_get_contents("log.html"); echo $contents; } ?>
We use a similar routine as we used in the post.php file, except this time we are only reading and outputting the contents of the file. The jQuery.ajax Request The AJAX request is the core of everything we are doing. This request not only allows us to send and receive data through the form without refreshing the page, but it also allows us to handle the data requested. 01 02 03 04 05 06 07 08 09 10 //Load the file containing the chat log function loadLog(){ $.ajax({ url: "log.html", cache: false, success: function(html){ $("#chatbox").html(html); //Insert chat log into the #chatbox div }, }); } We wrap our AJAX request inside a function. You will see why in a second. As you see above, we will only use three of the jQuery AJAX request objects. url: A string of the URL to request. We will use our chat log's filename of log.html. cache: This will prevent our file from being cached. It will ensure that we get an updated chat log every time we send a request. success: This will allow us to attach a function that will pass the data we requested. As you see, we then move the HTML data we requested into the #chatbox div. Auto-Scrolling As you may have seen in other chat applications, the content automatically scrolls down if the chat log container (#chatbox) overflows. We are going to implement a simple and similar feature, which will compare the container's scroll height before and after we do the AJAX request. If the scroll height is greater after the request, we will use jQuery's animate effect to scroll the #chatbox div. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 //Load the file containing the chat log function loadLog(){ var oldscrollHeight = $("#chatbox")[0].scrollHeight - 20; //Scroll height before the request $.ajax({ url: "log.html", cache: false, success: function(html){ $("#chatbox").html(html); //Insert chat log into the #chatbox div //Auto-scroll var newscrollHeight = $("#chatbox")[0].scrollHeight - 20; //Scroll height after the request if(newscrollHeight > oldscrollHeight){ $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div } }, }); } We first store the #chatbox div's scroll height into the oldscrollHeight variable before we make the request. After our request has returned successfully, we store the #chatbox div's scrolled height into the newscrollHeight variable. We then compare both of the scroll height variables using an if statement. If newscrollHeight is greater than the oldscrollHeight, we use the animate effect to scroll the #chatbox div. Continuously Updating the Chat Log Now one question may arise: how will we constantly update the new data being sent back and forth between users? Or to rephrase the question, how will we keep continuously sending requests to update the data? 1 setInterval (loadLog, 2500); //Reload file every 2500 ms or x ms if you wish to change the second parameter The answer to our question lies in the setInterval function. This function will run our loadLog() function every 2.5 seconds, and the loadLog function will request the updated file and autoscroll the div. How to Create Online Chat Application in PHP Tutorial Tutsplus Chat App Network Complete Code The chat app might not work properly for you if the right code is not placed inside the right files and in the right order. To avoid any confusion, I am posting the whole code that will go into two separate files called index.php and post.php. Here is the code for index.php: 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 User ". $_SESSION['name'] ." has left the chat session.
"; file_put_contents("log.html", $logout_message, FILE_APPEND | LOCK_EX); session_destroy(); header("Location: index.php"); //Redirect the user } if(isset($_POST['enter'])){ if($_POST['name'] != ""){ $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name'])); } else{ echo 'Please type in a name'; } } function loginForm(){ echo '

Please enter your name to continue!
Name —
'; } ?> Tuts+ Chat Application

Welcome,

Exit Chat

0){ $contents = file_get_contents("log.html"); echo $contents; } ?>

Here is the code for post.php: 1 2 3 4 5 6 7 8 9 ".date("g:i A")." ".$_SESSION['name']." ".stripslashes(htmlspecialchars($text))."
"; file_put_contents("log.html", $text_message, FILE_APPEND | LOCK_EX); } ?> The code that goes into style.css is already available in Step 2 of the tutorial. If the code you have does not seem to be working, make sure it matches the code provided here. Please note that all three files—index.php, post.php, and style.css—are located in the same directory. Awesome Online Chat PHP Scripts From CodeCanyon Would you rather download an [online chat PHP script](https://codecanyon.net/tags/chat) instead of creating one yourself? Then you'll want to check out these premium templates from CodeCanyon: 1. [Live Chat Unlimited](https://codecanyon.net/item/wordpress-live-chat-plugin/3952877)[](https://codecanyon.net/item/wordpress-live-chat-plugin/3952877) Live Chat Unlimited is a bestselling simple PHP chat box for a reason. It's very lightweight to keep your site load speeds down and can be installed on unlimited domains. The online chat PHP script also offers multi-lingual support through the WPML and Polylang plugins. You can also enable email notifications so you can be ready to chat with visitors. LiveChat Unlimited Online Chat PHP 2. [TotalDesk: Helpdesk, Live Chat, Knowledge Base and Ticket System](https://codecanyon.net/item/totaldesk/20502693)[](https://codecanyon.net/item/totaldesk/20502693) TotalDesk is a complete help desk solution for your business. Not only does it let you make your own chat box, but it also includes a ticket and notification system, among other things. You can create a searchable knowledge base for your site's visitors, so they can solve common problems on their own. TotalDesk also integrates well with WooCommerce and Slack. TotalDesk Chat for Website PHP 3. [XeroChat: Facebook Chatbot, eCommerce and Social Media Management Tool](https://codecanyon.net/item/xerochat-complete-messenger-marketing-software-for-facebook/24477224)[](https://codecanyon.net/item/xerochat-complete-messenger-marketing-software-for-facebook/24477224) If Facebook Messenger is part of your business's marketing strategy, you'll want to learn about XeroChat. It's designed with the messaging platform in mind and integrates well with it. This online chat PHP script lets you build responsive and interactive chatbots with ease. It's so fully featured that you can even set up eCommerce stores with the included code. Add XeroChat to your online business strategies. XeroChat Simple PHP Chat Box 4. [Chat Support Board: PHP Chat Application](https://codecanyon.net/item/support-board-chat-and-help-desk/20752085)[](https://codecanyon.net/item/support-board-chat-and-help-desk/20752085) Finally, there's Support Board, a PHP chat script that uses artificial intelligence to help serve your customers. Communicate directly with your audience with ease thanks to its smooth integration with other platforms. You'll save time and increase engagement with this simple PHP chat box. Support Board Online Chat PHP Even More PHP Script Templates PHP forms and scripts are a great way to round out your website. If you're looking for more templates that will save you time, check out some of these items from Envato: PHP 11 Best PHP Help-Desk Scripts and 5 Free Options Franc Lucas PHP 17 Best CRM & Project Management PHP Scripts (With 5 Free) Franc Lucas PHP 10 Best PHP Chat Scripts on CodeCanyon Franc Lucas PHP 19 Best PHP Event Calendar and Booking Scripts... and 3 Free Options Monty Shokeen Learn About PHP Scripts From Envato Tuts+ Are you looking to learn even more about the PHP scripting language? Then Envato Tuts+ is the best place to start (and finish). Our talented instructors have put together many PHP courses, tutorials, and guides that you can use to grow your knowledge base. Here are a few to get you started: PHP Create a Contact Form in PHP Monty Shokeen PHP How to Replace Strings in PHP Monty Shokeen PHP How to Use PHP in HTML Sajal Soni PHP How to Work With Cookies in PHP Sajal Soni Finished We are finished! I hope that you learned how a basic chat system works, and if you have any suggestions on anything, I'll happily welcome them. This chat system is a simple as you can get with a chat application. You can work off this and build multiple chat rooms, add an administrative back end, add emoticons, etc. The sky is the limit! Also, if you need a professional app or plugin for your next project, you can take a look at one of the many [chat scripts](https://codecanyon.net/tags/chat) we have for sale on CodeCanyon. Below are a few links you might want to check out if you are thinking of expanding this chat application: [Secure Your Forms With Form Keys](https://code.tutsplus.com/tutorials/secure-your-forms-with-form-keys--net-4753): prevent XSS (cross-site scripting) and cross-site request forgery. [Submit a Form Without Page Refresh Using jQuery](https://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59): expand on our AJAX request. [How to Make AJAX Requests With Raw JavaScript:](https://code.tutsplus.com/articles/how-to-make-ajax-requests-with-raw-javascript--net-4855) learn how requests work behind the scenes with raw JavaScript. How to Create Online Chat Application in PHP Tutorial Tutsplus Chat App This post has been updated with contributions from [Monty Shokeen](https://tutsplus.com/authors/monty-shokeen) and [Nathan Umoh](https://tutsplus.com/authors/nathan-umoh). Monty is a full-stack developer who also loves to write tutorials, and to learn about new JavaScript libraries. Nathan is a staff writer for Envato Tuts+.

mknhirojp commented 2 years ago

https://code.tutsplus.com/tutorials/how-to-create-a-simple-web-based-chat-application--net-5931

© Githubissues.

Githubissues is a development platform for aggregating issues.