HTML5-websocket聊天实例代码

— 2015年7月10日 in PHP技术 • add comment

在传统的网页实现聊天室的方法是通过每隔一段时间请求服务器获取相关聊天信息来实现，然而html5带来的websocket功能改变这了这种方式．由于websocket在连接服务器后允许保持连接来进行数据交互，因此服务器可以主动地向客户端发送相应的数据．对于html5的处理只需要在连接创建完成后在websocket的receive事件中处理接收的数据即可.下面通过实现一个聊天室来体验一下服务器可以主动地向客户端发的功能．

  1. <!DOCTYPE html>
  2. <?php
  3. //echo $_GET[‘othername’];exit;
  4. if($_GET[‘myid’]==$_GET[‘otherid’])
  5. {
  6.     echo “<script>
  7.         alert(‘您不能和自己聊天’);
  8.         window.close();
  9.     </script>”;
  10. }
  11. ?>
  12. <html>
  13. <head>
  14. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
  15. <title>网站在线聊天-客户在线交流工具</title>
  16. <input type=“hidden” id=“otherid”
  17.     value=“<?php echo $_GET[‘otherid’]?>”>
  18. <input type=“hidden” id=“othername”
  19.     value=“<?php echo $_GET[‘othername’]?>”>
  20. <input type=“hidden” id=“otherimg”
  21.     value=“<?php echo $_GET[‘otherimg’];?>”>
  22. <input type=“hidden” id=“myid” value=“<?php echo $_GET[‘myid’];?>”>
  23. <input type=“hidden” id=“myname”
  24.     value=“<?php echo $_GET[‘myname’];?>”>
  26. <input type=“hidden” id=“myimg”
  27.     value=“<?php echo $_GET[‘myimg’];?>”>
  28. <!– 查询数据库 中所有otherid的发来的离线聊天内容–>
  29. <?php
  30. $conn=mysql_connect(“192.168.1.100”,“root”,“”) or die(‘连接失败:’ . mysql_error());
  31. if(!mysql_select_db(“strategy”,$conn))
  32. {echo (‘数据库选择失败:’ . mysql_error());}
  33. mysql_query(“set names utf8”);
  34. $oid = $_GET[‘otherid’];
  35. $mid = $_GET[‘myid’];
  37. //在聊天窗口中列出未读的聊天信息
  38. $query = mysql_query(“select * from gy_chatmessage where receiverid=$oid and senderid=$mid and isscan=2 order by id asc”);
  40. //查看是否浏览过，isscan=1
  41. $isscan = isset($_GET[‘isscan’]) ? intval($_GET[‘isscan’]):”;
  42. if(!empty($isscan))
  43. {
  44.     $q= mysql_query(“update gy_chatmessage set isscan=1 where receiverid=$oid and senderid=$mid “);
  45. }
  46. ?>
  47. <!–html5 websocket 通信程序–>
  48. <script type=“text/javascript”>
  50.         var ws = null;
  51.         var s=”; var i=0;
  52.       var name = document.getElementById(“myname”).value;
  53.       //var myusername;
  56.         function startServer() {
  59.             // 设定WebSocket,注意协议是ws，请求是指向对应的WebSocketServlet的
  61.             //var url = “ws://192.168.1.101:8080/websocket88/websocket/echoAnnotation”;
  62.             //var url = “ws://192.168.1.101:8080/WebSocket/servlet/SocketServer”;
  63.             //var url = “ws://192.168.1.101:8080/test123/websocket/echoAnnotation”;
  64.             var url = “ws://192.168.1.109:8080/GLServer/websocket/echoAnnotation”;
  68.             // 创建WebSocket实例，下面那个MozWebSocket是Firefox的实现
  70.             if (‘WebSocket’ in window) {
  72.                 ws = new WebSocket(url);
  73.                 //alert(“new WebSocket”);
  75.             } else if (‘MozWebSocket’ in window) {
  77.                 ws = new MozWebSocket(url);
  80.             } else {
  82.                 alert(‘您好,您的浏览器版本较低,暂不支持websocket，无法使用在线聊天功能，建议升级或使用IE10、chrome、Firefox、Opera、Safari等主流浏览器’);
  83.                 window.close();
  84.                 return false;
  86.             }
  90.             // WebSocket握手完成，连接成功的回调
  92.             // 有个疑问，按理说new WebSocket的时候就会开始连接了，如果在设置onopen以前连接成功，是否还会触发这个回调
  94.             ws.onopen = function() {
  96.                 //alert(‘连接好了’);
  97.                alert(mytime()+’,您已经和对方连接成功，点击确定后开始和对方聊天’);
  99.                 var otherid = document.getElementById(“otherid”).value;
  100.                 var othername = document.getElementById(“othername”).value;
  101.                 var otherimg = document.getElementById(“otherimg”).value;
  103.                 var myid = document.getElementById(“myid”).value;
  104.                 var myname = document.getElementById(“myname”).value;
  105.                 var myimg = document.getElementById(“myimg”).value;
  106.                 //alert(username);
  107.                  ws.send(myid+“#”+myname+“#”+myimg+“#”+otherid+“#”+othername+“#”+otherimg);
  109.             };
  113.             // 收到服务器发送的文本消息, event.data表示文本内容
  115.             ws.onmessage = function(event) {
  116.             if(!i==0)
  117.             {
  118.                 //var i=”;
  120.                // i= event.data;
  121.                 //i=i.fontcolor(#FF0033);
  122.             //s = s +event.data+'<br/>’;
  123.             //s =  s+i+'<br/>’;
  124.             s =  s+'<span style=“color:red;”>’+event.data+'</span><br/>’;
  128.              //alert(‘Receive message: ‘ + s);
  130.             document.getElementById(“a”).innerHTML=s;
  132.             }else{
  133.             // name=event.data;
  134.             i++;
  135.             }
  136.             };
  140.             // 关闭WebSocket的回调
  142.                ws.onclose = function() {
  144.                //alert(‘服务器断线，本次聊天被终止!’);         
  146.                };
  148.         }
  152.         function sendMyMessage() {
  154.           //判断输入的内容是否为空
  155.           var textMessage = document.getElementById(‘textMessage’).value;
  156.         if(textMessage==”)
  157.             {
  158.                 alert(‘发送内容不能为空哦’);
  159.                 return false;
  160.             }
  161.             Date.prototype.format = function(format){
  162. var o = {
  163. “M+” : this.getMonth()+1, //month 
  164. “d+” : this.getDate(), //day 
  165. “h+” : this.getHours(), //hour 
  166. “m+” : this.getMinutes(), //minute 
  167. “s+” : this.getSeconds(), //second 
  168. “q+” : Math.floor((this.getMonth()+3)/3), //quarter 
  169. “S” : this.getMilliseconds() //millisecond 
  170. }
  172. if(/(y+)/.test(format)) {
  173. format = format.replace(RegExp.$1, (this.getFullYear()+“”).substr(4 – RegExp.$1.length));
  174. }
  176. for(var k in o) {
  177. if(new RegExp(“(“+ k +“)”).test(format)) {
  178. format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : (“00”+ o[k]).substr((“”+ o[k]).length));
  179. }
  180. }
  181. return format;
  182. }
  183. var now = new Date();
  184. var t = now.format(“yyyy-MM-dd hh:mm:ss”);
  185. //alert(t);
  187.             textMessage = name+’&nbsp;’+t+'<br/>’+’&nbsp;&nbsp;’+textMessage
  188.             //alert(textMessage);   
  189.               s =  s + textMessage+'<br/>’;
  191.             document.getElementById(“a”).innerHTML=s;
  193.             if(ws != null && textMessage != ”) {
  195.                 // 通过WebSocket想向服务器发送一个文本信息
  197.                 ws.send(textMessage);
  198.                 //清空当前textarea域的内容
  199.            document.getElementById(“textMessage”).value=”;
  201.             }
  203.         }
  206.         </script>
  207. </head>
  208. <body onLoad=“startServer()”>
  209. <div id=“header”
  210.     style=“width: 100%; height: 30px; border: 1px solid #ccc; background: #FF6600; color: red”><span
  211.     style=“color: #0066FF; margin-left: 10px; line-height: 30px;”>网站webim在线聊天</span></div>
  212. <p id=“a” style=“height: 320px; width: 690px; border: 1px solid #d2d2d2; overflow-y: scroll;”>
  213. <span style=“color: #0066FF; margin:10px; margin-bottom:0px; display:block”>欢迎使用网站在线聊天系统,如果对方不在线，您可以给他留言。</span><br/>
  214. <?php
  215. while($row = mysql_fetch_array($query))
  216. {
  217. //print_r($row);
  218. echo ‘&nbsp;&nbsp’.$row[‘receiver’];
  219. echo ‘&nbsp;&nbsp’.$row[‘createtime’];
  220. echo ‘<br>’;
  221. echo ‘<br/>‘.’&nbsp;&nbsp’;
  222. echo $row[‘content’];
  223. echo ‘<br/><br/>’;
  224. }
  225. ?>
  226. </p>
  227. <div id=“mid_mid”><span style=“font-size:12px; color:#FF9900”>请在下面文本框里输入你想要聊天的内容,禁止输入#等无意义的字符和违法信息</span></div>
  229. <div class=“webim-body-content-textarea”>
  230. <input id=“textMessage”
  231.     size=“60” name=“ca” class=“webim-textarea” value=“”
  232.     onKeyDown1=“javascript:butonclick();” onFocus=“clear()” cols=“” rows=“” />
  233. <!–请在下面文本框里输入你想要聊天的内容,禁止输入#等无意义的字符和违法信息。–>
  235. </div>
  236. <div class=“webim-body-comtent-footer”>
  237. <button class=“webim-body-comtent-submit” onClick=“custom_colse()”>关闭</button>
  238. <button class=“webim-body-comtent-submit” id=“do”
  239.     onClick=“sendMyMessage()”>发送</button>
  240. <a target=“_blank” href=“#”><!–您可以直接按enter键发送内容&nbsp;&nbsp;–>webim在线聊天&gt;&gt;</a>
  241. <div id=“imjs-empty-tip” class=“webim-body-footer-tips”
  242.     style=“display: none”><s>&nbsp;</s>发送内容不能为空哦</div>
  243. <div id=“imjs-selectuser-tip” class=“webim-body-footer-tips”
  244.     style=“display: none”><s>&nbsp;</s>请您选择用户哦</div>
  245. </div>
  247. <style type=“text/css”>
  248. #mid_mid {
  249.     position: relative;
  250.     background: #f3f3f3;
  251.     height: 14px;
  252.     line-height: 14px;
  253.     padding: 6px 0 6px 0px;
  254.     width: 690px;
  255. }
  257. textarea {
  258.     width: 400px;
  259.     height: 66px;
  260. }
  262. .webim-body-content-textarea .webim-textarea {
  263.     padding: 0px;
  264.     resize: none;
  265.     width: 690px;
  266.     height: 50px;
  267.     border: 0;
  268.     font-size: 12px;
  269.     overflow-y: auto;
  270.     border: 1px solid #d2d2d2;
  271. }
  273. .webim-body-comtent-footer {
  274.     position: relative;
  275.     height: 38px;
  276.     line-height: 28px;
  277.     background: #f3f3f3;
  278.     border: 1px solid #d2d2d2;
  279.     border-left: 0;
  280.     border-right: 0;
  281.     width: 690px;
  282. }
  284. .webim-body-comtent-footer a {
  285.     text-decoration: none;
  286.     font-size: 12px;
  287. }
  289. .webim-body-comtent-submit {
  290.     cursor: pointer;
  291.     float: right;
  292.     margin: 2px 0;
  293.     margin-left: 5px;
  294.     width: 80px;
  295.     display: block;
  296.     background: #fd9603;
  297.     color: #fff;
  298.     height: 32px;
  299.     line-height: 31px;
  300.     text-align: center;
  301. }
  302. </style>
  303. <script>
  304. function butonclick()
  305. {
  308.     //点击enter键可以直接发送信息的功能
  309.     if(event.keyCode == 13)
  310.     {
  311.          //判断输入的内容是否为空
  312.           var textMessage = document.getElementById(‘textMessage’).value;
  313.         if(textMessage==”)
  314.             {
  315.                 alert(‘您还没有输入内容哦’);
  316.                 return;
  317.             }
  319.         //判断是不是通过enter回车键提交
  320.         var button = document.getElementById(“do”);
  321.         button.click();
  322.         //清空当前textarea域的内容
  323.         document.getElementById(“textMessage”).value==”;
  325.         return false;
  326.     }
  327. }
  329.     var a= document.getElementById(“textMessage”);
  331. function clear()
  332. {
  333.     if(a.value==’请在下面文本框里输入你想要聊天的内容,禁止输入#等无意义的字符和违法信息’)
  334.     {
  335.         a.value=”;
  336.     }
  338. }
  340.  //时间
  341. function mytime(){
  342.    var now=(new Date()).getHours();
  343.     if(now>0&&now<=6)
  344.     {
  345.       return “午夜好”;
  346.     }else if(now>6&&now<=11){
  347.       return  “早上好”;
  348.     }else if(now>11&&now<=14){
  349.       return “中午好”;
  350.     }else if(now>14&&now<=18){
  351.       return “下午好”;
  352.    }else{
  353.       return “晚上好”;
  354.    }
  355. }
  357. //替换所有的回车换行   
  358. function trim2(content)
  359. {
  360.     var string = content;
  361.     try{
  362.         string=string.replace(/\r\n/g,“<br />”)
  363.         string=string.replace(/\n/g,“<br />”);
  364.     }catch(e) {
  365.         alert(e.message);
  366.     }
  367.     return string;
  368. }
  369. //替换所有的空格
  370. function trim(content)
  371. {
  372.     var string = content;
  373.     try{
  374.         string=string.replace(/ /g,“&nbsp;”)
  375.     }catch(e) {
  376.         alert(e.message);
  377.     }
  378.     return string;
  379. }
  381. //离开当前页面时js提示关闭
  383.  function custom_colse()
  384.  {
  385.     if(confirm(“您即将离开本页面，离开后无法继续与对方聊天，确定要终止本次聊天吗?”))
  386.     {
  387.         window.opener=null;
  388.         window.open(”,’_self’);
  389.         window.close();
  390.         ws.send(“disconnection”);
  391.     }else{}
  392.  }
  393. </script>
  395. </body>
  397. </html>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

www.admin122.com 关注微信
24小时客服在线