`
lorry1113
  • 浏览: 263229 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

即时通讯

    博客分类:
  • js
阅读更多

     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> 

好了赶快调试一下吧,是不是已经实现了基本的聊天功能.
分享到:
评论

相关推荐

    企业内部即时通讯软件

    企业内部即时通讯软件是现代企业提高协作效率的重要工具,它为组织内的员工提供了一个安全、高效、便捷的沟通平台。这种软件通常集成了多种通信方式,包括文本聊天、语音通话、视频会议、文件共享等功能,旨在打破...

    aspx网页版即时通讯源码

    【即时通讯技术基础】 即时通讯(Instant Messaging,简称IM)是一种允许用户实时交流的技术,它在互联网上提供了快速、便捷的通信方式。在"aspx网页版即时通讯源码"中,我们可以看到开发者利用Web技术构建了一个...

    即时通讯系统源码 飞机即时通讯源码 适配iOS安卓系统源码.zip

    即时通讯系统源码是开发移动应用的一个重要领域,特别是在当今高度互联的世界中,人们对于实时信息交换的需求越来越大。本资源包含的"飞机即时通讯源码"适用于iOS和Android两大主流移动操作系统,为开发者提供了一个...

    【关于进一步规范XXX群“即时通讯群组”管理的通知】XXXTentacion.pdf

    关于即时通讯群组管理的通知 一、基本原则 即时通讯群组是以公司信息上下贯通为目的,用于工作交流和任务部署的工作群体。是工作交流、情况通报、进展汇报等事项的工作平台。 知识点: 1.即时通讯群组的建立目的:...

    P2P即时通讯_P2P_即时通讯_P2P即时通讯_

    P2P即时通讯技术是一种基于对等网络架构的通信方式,它不同于传统的客户端-服务器(C/S)模式,其中每个用户既是服务的消费者也是服务的提供者。在P2P即时通讯系统中,用户之间可以直接交换信息,无需通过中心服务器...

    即时通讯APP源码 IM原生APP高仿微信全源码无加密

    即时通讯(Instant Messaging,简称IM)是现代移动应用中不可或缺的一部分,它允许用户实时地进行文字、语音、视频通信以及分享各类信息。本资源提供的是一款高仿微信的即时通讯APP源码,对于开发者来说,这是一个...

    一套带即时通讯的商城源码、海外购商城+im即时通讯源码.zip

    这套资源包含了一套完整的商城系统源码,特别之处在于它集成了即时通讯功能,使得用户在浏览和购物的过程中可以实时交流。这样的设计极大地提升了用户体验,促进了用户的互动性和交易效率。即时通讯(IM)功能通常由...

    基于各大即时通讯软件切换的APP设计书

    ### 基于各大即时通讯软件切换的APP设计书 #### 一、设计背景与理念 随着移动互联网技术的发展和普及,即时通讯软件已经成为人们日常沟通的重要工具之一。市场上涌现出了如QQ、微信、易信等多种即时通讯应用,每个...

    基于QT安全即时通讯软件

    【基于QT安全即时通讯软件】是一款专为用户提供安全通信环境的应用程序,其核心目标是确保用户数据的安全性和隐私。QT是一个跨平台的C++应用程序开发框架,被广泛用于创建图形用户界面和其他各种软件。本项目涉及到...

    多语言IM即时通讯源码 支持7端互通通讯源码带搭建教程

    标题中的“多语言IM即时通讯源码”指的是一个支持多种语言的即时通讯系统源代码,这种系统能够实现实时的信息交换,通常用于在线聊天、客服系统或者团队协作工具。IM,即Instant Messaging,即时通讯,是互联网应用...

    52im即时通讯源码 带安卓和iso源码

    《52im即时通讯源码:安卓与iOS平台的实现详解》 即时通讯(Instant Messaging,简称IM)技术是现代互联网应用中不可或缺的一部分,它为用户提供实时、便捷的信息交流方式。52im即时通讯源码是一款支持Android和iOS...

    基于C#的即时通讯客户端源码.zip

    即时通讯(Instant Messaging,IM)系统是现代网络通信的核心部分,它允许用户实时地进行文本、语音甚至视频交流。在本项目中,我们探讨的是一个基于C#编程语言实现的即时通讯客户端源码。C#是一种面向对象的、类型...

    基于ajax的即时通讯系统例子

    即时通讯(Instant Messaging,IM)系统是互联网上广泛使用的应用之一,它允许用户实时地进行文字、语音甚至视频交流。在本案例中,我们将探讨如何使用AJAX(Asynchronous JavaScript and XML)技术来构建一个基于...

    企业即时通讯源码

    企业即时通讯系统源代码销售 类似 MSN、QQ、雅虎通的即时通讯工具,是一套统一通讯、商务协作的即时通讯工具。主要应用于企业内部沟 通、各种会议,企业和客户以及合作 伙伴的交流,客户服务系统,远程培训...

    socket即时通讯.zip

    【标题】"socket即时通讯.zip"的项目是一个基于Spring Boot框架和MySQL数据库的即时通讯系统。这个系统的主要目标是提供实时的在线聊天功能,并且具备查看在线用户数量以及记录聊天历史的能力。 【核心技术与概念】...

    C# winform Socket 即时通讯

    在IT行业中,即时通讯(Instant Messaging,简称IM)是一种常见的技术,它允许用户实时地进行文本、语音甚至视频交流。在本案例中,我们将聚焦于使用C#编程语言和WinForms来实现基于Socket的即时通讯系统。Socket是...

    java开发基于SpringBoot+WebSocket+Redis分布式即时通讯群聊系统.zip

    Java开发基于SpringBoot+WebSocket+Redis分布式即时通讯群聊系统。一个基于Spring Boot + WebSocket + Redis,可快速开发的分布式即时通讯群聊系统。适用于直播间聊天、游戏内聊天、客服聊天等临时性群聊场景。 ...

    多语言IM即时通讯源码-支持7端互通通讯/带教程源码下载

    即时通讯(Instant Messaging,简称IM)是现代互联网应用中不可或缺的一部分,它允许用户实时地进行文字、语音甚至视频交流。本资源提供了一套多语言的IM即时通讯源码,特别强调了其支持7个不同终端之间的互通通讯。...

    即时通讯全套JAVA源码

    用JAVA语言,基于t-io开发的轻量、高性能、单机支持几十万至百万在线用户IM,主要目标降低即时通讯门槛,快速打造低成本接入在线IM系统,通过极简洁的消息格式就可以实现多端不同协议间的消息发送如内置(Http、...

    基于Java的J-IM轻量级高性能即时通讯系统设计源码

    该项目旨在降低即时通讯门槛,快速打造低成本接入在线IM系统。系统通过极简洁的消息格式实现了多端不同协议间的消息发送,如内置的Http、Websocket、Tcp自定义IM协议。J-IM具有轻量、高性能的特点,单机支持几十万至...

Global site tag (gtag.js) - Google Analytics