Script Chat Room PHP (txt) เขียนเองครับ Update 17.4.2011

Pang25441 · 04 เมษายน 2011, 23:16:59

ไม่รู้จะตั้งชื่อโปรแกรมว่าอะไร ตั้งว่า mchat ละกัน ตามชื่อเว็บผม music-room

ใช้ javascript และ jQuery ในการเขียน
(AJAX & PHP)
jQuery อยู่ในรูปแบบ $ อย่างเดียว อาจจะไปชนกับ api ตัวอื่นได้ อันนี้ช่วยไม่ได้ ไว้จะปรับปรุงภายหลัง
โปรแกรมนี้ใช้แค่ PHP script ไม่ได้ใช้ ฐานข้อมูลแม้แต่น้อย และอาจใช้ทรัพยากรเครื่องสูงอยู่บ้าง เพราะต้องเขียนไฟล์อยู่ตลอด
และไม่มีระบบจัดการใดๆ ใช้เพียงการตั้งค่าด้วยมือเท่าานั้น ดังนั้นจึงต้องมีความรู้ด้าน PHP และ Javascript บ้างเล็กน้อย
หาความรู้ได้ที่ php.net และ w3school.com

วิธีใช้ / ตั้งค่า

เอาไว้ไหนยังไง

ไฟล์ทั้งหมดจะอยู่ในโฟลเดอ chatroom ส่วนหน้าแสดงผลจะอยู่ข้างนอก(ในที่นี้คือ index.php) จะเอาไว้ในไดเรคทอรี่ไหนก็ได้ แต่รูปแบบต้องเป็นแบบนี้

ในหน้าแสดงผล
ในส่วน <header> ต้องมี.....

อ้างถึง
<link href="chatroom/chatroom-elements.css" rel="stylesheet" type="text/css" /> //Style sheet ของ แชตตัวนี้
<script type="text/javascript" src="htttttp://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> // jQuery จะใช้จาก google หรือ จะใช้ของตัวเองก็แล้วแต่
<script type="text/javascript" src="chatroom/mchat-apps.js"></script> // Script หลักของ แชตรูม ครับ
<script type="text/javascript">
$(function(){ // ส่วนนี้เอาไว้กำหนด และเริ่ม การทำงาน ของสคริป
   mchat.newObject('#main-chatroom'); //คำสั่งสำหรับกำหนดส่วนที่จะแสดงหน้าต่างของห้องสนทนา ใส่ id ของ object ในส่วนที่เป็นสีน้ำเงิน
   mchat.userlist.newObj('#main-userlist'); //คำสั่งสำหรับแสดงรายชื่อของคนที่อยู่หน้าแชต **ไม่ใส่ก็ได้
   mchat.emoticon.newObj('#main-emoticon'); //คำสั่งสำหรับส่วนของ Emoticon **ไม่ใช้ก็ได้เช่นกัน
   mchat.start(); // คำสั่งเริ่มการทำงาน **ไม่ใส่ไม่ได้ -*-
});
</script>

ส่วน <body> ก็ต้องมี...

โค้ด เลือก


    <div id="main-chatroom"></div>
    <div id="main-userlist"></div>
    <div id="main-emoticon"></div>

^สามส่วนที่กำหนดใว้ด้านบนนั่นล่ะ

อาจแยก Layout ประมาณนี้ก็ได้

โค้ด เลือก


<table width="800" border="1" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <td width="600" bgcolor="#FFCC99"><div id="main-chatroom"></div></td>
    <td valign="top" bgcolor="#FFCCCC"><div id="main-userlist"></div></td>
  </tr>
  <tr>
    <td colspan="2" valign="top" bgcolor="#FFFFCC"><div id="main-emoticon"></div></td>
  </tr>
</table>

---ในส่วนของไฟล์ mchat-apps.js มีการตั้งค่าดังนี้ ---

mchat.val['maxmsg'] คือ จำนวนข้อความที่แสดงได้สูงสุด เพื่อคืน Ram ให้ระบบ กันหน้าเว็บค้าง
mchat.val['refresh_rate'] คือ อัตราการ refresh ข้อความ หน่วยเป็น millisecond 4000-5000ms หรือ 4-5 วินาที เป็นค่าที่ดี(มั้งนะ)
mchat.val['userrefresh'] คือ อัตราการ refresh ของรายชื่อ หน่วยเป็น millisecond เช่นกัน 60000ms หรือ 1 นาที เป็นค่าที่ผมคิดว่าเหมาะสม

เออลืมไป มี
mchat.val['title'] อีกอัน สำหรับ title ของห้องแชต บรรทัดไหนไม่รู้ หาเอา

===== Emoticon ====
แมงดุ๊กดิ๊กจะต้องเก็บไว้ในโฟลเดอ emoticon ภายในโฟลเดอ chatroom นั่นเอง

และ แมงดุ๊กดิ๊กต้องแยกย่อยในโฟลเดออีกที แบบนี้ จึงจะใช้ได้ครับ

จากนั้นให้มาตั้งค่าที่ emosetting.php ดังนี้

อ้างถึง
$folder = array('ChunChun','Tuzki','Soldier','Rabbit','Mushroom'); // รายชื่อโฟลเดอที่แยกย่อยใน โฟลเดอ emoticon ที่ต้องการให้แสดง(ถ้าไม่ใส่จะไม่แสดง)
$url = "htttttp://music-room.in.th/chatroom/emoticon/"; // url ที่นำไปสู่โฟลเดอ emoticon *ปิด / ด้วย

เท่านี้ก็ใช้งานได้

Option เสริมสำหรับทำเท่
ณ.ไฟล์ apps.php

ที่ขีดเส้นสีเขียวตามภาพคือ
คำที่ไม่อนุญาตให้ใช้ในการตั้งชื่อ จะปิดก็ได้โดยใส่ // ข้างหน้า (บรรทัดที่ 27 ตามภาพ)

และเส้นสีแดงตือ โค้ดลับ สำหรับ คำว่า Admin ต่อท้ายชื่อเรา(แต่มันก็ไม่มีอะรพิเศษ โชวพาวเฉยๆ)
แก้ตามสดวก หรือจะ // ปิดก็ได้ (บรรทัดที่ 28 ตามภาพ)
ถ้าจะใช้ เวลา login ก็ ใส่ username-123456 ถ้าตรงมันก็จะตัด -123456 ทิ้งให้แล้วเปลี่ยนเป็น (Admin)

ไร้สาระมะ

=================================================================
Download
jQuery : http://jquery.com/
MChat : http://music-room.in.th/chatroom/setup/MChat-Demo-17.4.2011.rar <----- 17/4/2011
-- 4.4.2011 http://music-room.in.th/chatroom/setup/mchat-demo-4.4.2011.rar

Demo :
http://music-room.in.th/chatroom.php
=================================================================

ปัญหาที่ผมเห็นตอนนี้คือ
1. ชื่อมันตั้งซ้ำกันได้ *อันนี้ผมแก้ได้ แต่ตอนนี้ขี้เกียจ ไว้วันหลัง
2. เปิดนานๆ มันค้าง หาสาเหตุไม่เจอ ไว้เจอแล้วจะแก้ให้
3. ถ้ามีความเห็นอะไร หรือมีอะไรจะแนะนำ หรือต้องการอะไร คอมเม้นได้ครับ ต้องการมาก

bestnmk21 · 04 เมษายน 2011, 23:21:14

นี่แหละที่ตามหาล่ะ

googlerich · 04 เมษายน 2011, 23:29:13

เยี่ยมมากครับ +1

nineaom · 04 เมษายน 2011, 23:47:13

แจ่มเลย ครับ เหลือแค่ปรับแต่งหน้าตา เอง

เก่งอย่าง นี้ สอน เขียนโค๊ดสร้าง Gen sitemap Auto หน่อยดิครับ

ขอบคุณมากคัรบ

Guess_H · 04 เมษายน 2011, 23:56:16

ขอบคุณมากครับ ผมคงจะต้องศึกษาให้รู้ให้ได้ครับ.. ว่ามันเขียนยังงัย..

tum2008 · 05 เมษายน 2011, 00:21:38

แจ่มครับ ไว้ต้องลอง

aum_mix · 05 เมษายน 2011, 00:23:21

เก่งจังเลยน่าสนับสนุน

gf003 · 05 เมษายน 2011, 00:29:42

ต้องลองงงง

YourBest · 05 เมษายน 2011, 00:48:08

mean · 05 เมษายน 2011, 00:50:19

เก่งมากครับ เป็นกำลังใจให้พัฒนา ต่อๆ ไปครับ
chat ของ fb มีรูปแบบการ response ของ js น่าสนใจนะครับ ว่ามีเวลาจะศึกษาดูบ้าง ลองดูครับ

Pang25441 · 05 เมษายน 2011, 01:02:53

อ้างถึงจาก: mean ใน 05 เมษายน 2011, 00:50:19
เก่งมากครับ เป็นกำลังใจให้พัฒนา ต่อๆ ไปครับ
chat ของ fb มีรูปแบบการ response ของ js น่าสนใจนะครับ ว่ามีเวลาจะศึกษาดูบ้าง ลองดูครับ

เท่าที่ดูด้วยตาเปล่า แชตของ fb พอกด enter ปุ๊บ จะแสดงที่จอเราปั๊บ แล้วค่อยส่งข้อมูลไป ทีหลัง อะไรแบบนั้น อ่ะคับ ดูด้วยตาเปล่าน่ะ เคยไปแกะโค้ดเฟสบุคดู ......มึนไปสามวันครับ

Pang25441 · 05 เมษายน 2011, 01:39:30

ผมตั้งให้มันตัด log file ที่ 1MB อ่ะ
เมื่อกี้โฮสผม ไฟล์แค่ 200k กว่าๆเอง เน่าแล้ว

เลยได้ลบ log เก่าทิ้ง จึงใช้ได้

ใครเอาไปใช้เป็นยังไงก็มาบอกผมหน่อย รู้สึกว่านี่จะเป็น critical bug เลยล่ะ
คงต้องสั่งให้ตัดที่ 100k แล้วสงสัยกินแรมเกินไป

ไฟล์ที่ว่า เรียกดู/ดาวน์โหลดไม่ได้ด้วย ไม่รู้เป็นอะไร ขึ้น Fobiden 403 ใครรู้ช่วยบอกที -*-
แต่มันโหลดผ่าน ftp ได้ แต่ข้างใน เละหมดเลย ภาษาไทยเป็น ธฯธฯธฯธฯธฯธฯธฯธ

deeztiwz · 05 เมษายน 2011, 01:44:55

ขอบคุณหลาย เก็บแล้วๆ

picharnan · 05 เมษายน 2011, 02:47:24

เคยอ่านเจอคอมเม้นของใครนี้หล่ะครับว่า FB chat นั้น เขียนแบบ Listener ครับ

ถ้าเขียนเป็นแบบ Listener จริงคงทำให้ลดการสร้าง request ไปได้เยอะเลยครับ

Pang25441 · 05 เมษายน 2011, 03:19:50

ผมนั่งดู java console แล้ว มันก็ request เหมือนกันแหละ แต่พอดีในกลุ่มไม่มีคนอยู่ มันเลยรีเควสช้าอ่ะครับ ประมาณ 10 วิ

เป็นไปได้ว่า เวลาการ request จะแปรผันตามความถี่ของข้อมูล ที่อัพเดท (อาจจะคำนวณที่เซิฟเวอแล้วส่งกลับมาคำนวณที่เราอีกที)
แต่วิธีที่ว่า เป็นการลดการ Request ที่แจ่มเลย ผมจะเอาไปใช้บ้าง

ming0189 · 05 เมษายน 2011, 07:12:09

แจ่มครับ

Digitalz · 05 เมษายน 2011, 07:30:33

โห สุดยอดมากครับ

NightClub · 05 เมษายน 2011, 07:32:25

แนะนำ chat ครับ

การเก็บ chat ไว้ใน log มันไม่เป็นผลดีเลยครับ เพราะกินทรัพยากรมาก

ให้เก็บแยกออกมา 1 chat 1 txt จะดีกว่าครับ

เช่น 1.php 2.php 3.php 4.php

และมีอีกไฟล์นึง คือ lastest.php อันนี้จะใส่ id ของ chat ล่าสุดครับ คือ ทุกครั้งที่มีการ chat เราจะมาอัพเดทตัวนี้ด้วย

สมมุติ lastest.php แสดงค่าล่าสุด คือ 10
เวลา เราแสดงผล เราก็ แสดงข้อมูลจาก lastest.php - 4 จะได้ 10 - 6 ทีนี้เราก็มา เริ่มทำการ include

include("10.php");
include("9.php");
include("8.php");
include("7.php");
include("6.php");

เวลาลบก้ง่าย เวลาตรวจสอบว่ามีการอัพเดทแชทหรือเปล่า ก้ง่ายครับ เพราะเราสามารถเช็คได้จากไฟล์ lastest.php

ไม่กินแรม ลบก็ง่าย แต่ต้องเขียนสคริปเพิ่ม หรือ ถ้าเพิ่ม 1 chat ก็ ลบออกไป1 แชท

ลองดูครับ

yen032 · 05 เมษายน 2011, 07:43:23

+1

Pang25441 · 05 เมษายน 2011, 15:04:44

อ้างถึงจาก: NightClub ใน 05 เมษายน 2011, 07:32:25
แนะนำ chat ครับ

การเก็บ chat ไว้ใน log มันไม่เป็นผลดีเลยครับ เพราะกินทรัพยากรมาก

ให้เก็บแยกออกมา 1 chat 1 txt จะดีกว่าครับ

เช่น 1.php 2.php 3.php 4.php

และมีอีกไฟล์นึง คือ lastest.php อันนี้จะใส่ id ของ chat ล่าสุดครับ คือ ทุกครั้งที่มีการ chat เราจะมาอัพเดทตัวนี้ด้วย

สมมุติ lastest.php แสดงค่าล่าสุด คือ 10
เวลา เราแสดงผล เราก็ แสดงข้อมูลจาก lastest.php - 4 จะได้ 10 - 6 ทีนี้เราก็มา เริ่มทำการ include

include("10.php");
include("9.php");
include("8.php");
include("7.php");
include("6.php");

เวลาลบก้ง่าย เวลาตรวจสอบว่ามีการอัพเดทแชทหรือเปล่า ก้ง่ายครับ เพราะเราสามารถเช็คได้จากไฟล์ lastest.php

ไม่กินแรม ลบก็ง่าย แต่ต้องเขียนสคริปเพิ่ม หรือ ถ้าเพิ่ม 1 chat ก็ ลบออกไป1 แชท

ลองดูครับ

อ๋อ เข้าใจแล้ว
แต่บางที บางคน(เช่นผม)
เห็น log มีความสำคัญบางประการ
และอาจใช้ประโยชน์ในการอ้างอิงได้

ดังนั้นจะเขียนให้มันทำได้ทั้งสองแบบละกัน