即时通讯

最新推荐文章于 2024-03-09 15:46:31 发布

lorry1113

最新推荐文章于 2024-03-09 15:46:31 发布

阅读量190

点赞数

分类专栏： js 文章标签： jQuery PHP Ajax MySQL JavaScript ViewUI

本文链接：https://blog.csdn.net/lorry1113/article/details/83520233

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

IM(InstantMessaging 即时通讯,实时传讯) 这是一种可以让使用者在网络上建立某种私人聊天室（chatroom）的实时通讯服务。

到底什么才算是实时，至少我认为我们将要实现的不算是实时，我们将要通过“轮询”实现。如果刚接触 Ajax 或者仅对该领域有所了解，“轮询” 的概念可能让您感到害怕。不幸的是，轮询是惟一的办法。要在客户机和服务器之间建立连续管道，同时又不需要在两端安装特定软件，尚不存在可实现此目的的跨平台、跨浏览器方法。即便这样，可能还需要对防火墙进行专门配置才行得通。因此，如果需要人人能用的一种简便办法，Ajax 和轮询是惟一的可能。

jQuery 是什么？

jQuery 由 John Resig 创建于 2006 年初，对于任何使用 JavaScript 代码的程序员来说，它是一个非常有用的 JavaScript 库。无论您是刚刚接触 JavaScript 语言，并且希望获得一个能解决文档对象模型（Document Object Model，DOM）脚本和 Ajax 开发中一些复杂问题的库，还是作为一个厌倦了 DOM 脚本和 Ajax 开发中无聊的重复工作的资深 JavaScript 专家，jQuery 都会是您的首选。

jQuery 能帮助您保证代码简洁易读。您再也不必编写大堆重复的循环代码和 DOM 脚本库调用了。使用 jQuery，您可以把握问题的要点，并使用尽可能最少的代码实现您想要的功能。

毫无疑问，jQuery 的原理是独一无二的：它的目的就是保证代码简洁并可重用。

好了不再罗嗦了，让我们立即开始吧。

第一步建立一个登录页面

1. <html>
2. <head><title>用户登录页面</title></head>
3. <body>
4. <form action="chat.php" method="post">
5. 用户名: <input type="text" name="username">
6. <input type="submit" value="Login">
7. </form>
8. </body>
9. </html>

作用：要给聊天者一个身份标识。这就需要一个简单的登录页。这里就不过多说明了。

第二步建立数据存储
我们需要将聊天的内容等存储起来以便让聊天者之间通过服务器实现聊天内容的交互，这里我们选择数据库存储，当然您也可以直接用xml存储等。

我们在mysql服务器上建立一个IM数据库并且在IM数据库里面建立一个表

1. DROP TABLE IF EXISTS messages;
2.
3. CREATE TABLE messages (
4. message_id INTEGER NOT NULL AUTO_INCREMENT,
5. username VARCHAR(255) NOT NULL,
6. message TEXT,
7. PRIMARY KEY ( message_id )
8. );

message_id 表主键 username 存储聊天者的身份标识 message 存储说话的内容。

第三步基本的用户聊天界面

1. <?php
2. session_start();
3. if ( array_key_exists( 'username', $_POST ) ) {
4. $_SESSION['user'] = $_POST['username'];
5. }
6. $user = $_SESSION['user'];
7. ?>
8. <html>
9. <head><title><?php echo( $user ) ?> - Chatting</title>
10. <script src="js/jquery.js"></script>
11. </head>
12. <body>
13. <div id="chat" style="height:400px;overflow:auto;">
14. </div>
15.
16. <script>
17. $(document).ready(function(){
18. $("#add_btn").click(function(){
19. $.ajax({
20. type: "POST",
21. url: "add.php",
22. data:$("#chatmessage").serialize(),
23. success: function(msg){ $("#messagetext").val(""); }
24. });
25. });
26.
27. });
28.
29. </script>
30.
31. <form id="chatmessage">
32. <textarea name="message" id="messagetext">
33. </textarea>
34. </form>
35.
36. <button ID="add_btn">Add</button>
37.
38. <script>
39. var lastid=0;
40. function getMessages()
41. {
42.
43. $.ajax({
44. type: "POST",
45. url: "message.php",
46. data: "lastid="+lastid,
47. success: function(xml){
48. $(xml).find('messagelist > message').each(function(){
49. $("#chat").html($("#chat").html()+
50. $(this).find("user").text()+
51. ":"+$(this).find("msg").text()+"<br>");
52. lastid=$(this).find("id").text();
53.
54. });
55. window.setTimeout( getMessages, 1000 );
56. }
57.
58. });
59. }
60. getMessages();
61. </script>
62.
63. </body>
64. </html>

代码说明：
首先我们需要获得用户的身份标识并且将它存储在session里面。

1. <?php
2. session_start();
3. if ( array_key_exists( 'username', $_POST ) ) {
4. $_SESSION['user'] = $_POST['username'];
5. }
6. $user = $_SESSION['user'];
7. ?>

当我们输入完我们的发言时通过点击 add按钮将发言内容发送到服务器上存储在数据库里面这样别的用户通过读取数据库记录就能看到我们的发言了。

1. <script>
2. $(document).ready(function(){
3. $("#add_btn").click(function(){
4. $.ajax({
5. type: "POST",
6. url: "add.php",
7. data:$("#chatmessage").serialize(),
8. success: function(msg){ $("#messagetext").val(""); }
9. });
10. });
11.
12. });
13.
14. </script>

下面这段代码就是通过每1秒向服务器发送请求来获得发言的信息。

1. <script>
2. var lastid=0;
3. function getMessages()
4. {
5.
6. $.ajax({
7. type: "POST",
8. url: "message.php",
9. data: "lastid="+lastid,
10. success: function(xml){
11. // $("#chat").html(xml);
12. //var nodes=$("messagelist > message",xml);
13. //alert(nodes.length);
14.
15. //alert(xml);
16. $(xml).find('messagelist > message').each(function(){
17. //($(this).find("id").text()).appendTo("#chat");
18. $("#chat").html($("#chat").html()+$(this).find("user").text()+":"+$(this).find("msg").text()+"<br>");
19. lastid=$(this).find("id").text();
20. //alert($(this).find("id").text());
21. });
22. window.setTimeout( getMessages, 1000 );
23.
24.
25. }
26.
27. });
28. }
29. getMessages();
30. </script>

有人可能要问那个lastid 是做什么的？

页面每秒请求一次对话的所有聊天记录。虽然对于较短的对话影响不大，但是如果对话很长，性能问题就显现出来了。所幸的是解决起来很简单。每条消息都有 message_id，这个数字自动递增。因此，如果知道已经有了属于某个 ID 的消息，只需要请求出现在此 ID 之后的消息就可以。这样可以大大降低消息传递的数量。多数请求很可能没有新的消息，传递的包就会变小。

添加发言程序：
add.php

1. <?
2. session_start();
3. ?>
4. <?
5. mysql_connect("localhost","root","") or die("无法连接数据库");
6. mysql_query("INSERT INTO im.messages VALUES ( null,'".$_SESSION['user']."', '".$_POST['message']."' )");
7. ?>

读取消息程序：

1. <?
2. session_start();
3. header('Content-type: text/xml');
4. ?>
5. <messagelist>
6. <?php
7. mysql_connect("localhost","root","") or die("无法连接数据库");
8. $row = mysql_query('SELECT * FROM im.messages where message_id >'.intval($_POST["lastid"]) );
9. while( $field=mysql_fetch_array($row ) )
10. {
11. ?>
12. <message>
13. <id><?php echo($field[0]) ?></id>
14. <user><?php echo($field[1])?></user>
15. <msg><?php echo($field[2]) ?></msg>
16. </message>
17. <?php
18. }
19. ?>
20. </messagelist>

好了赶快调试一下吧，是不是已经实现了基本的聊天功能.