如沐博客-互联网观察者

致力于互联网产业的发展

« nginx服务器PATHINFO配置基于websocket和swoole的简易聊天室(二) »

基于websocket和swoole的简易聊天室

背景:

之前做过一个微信推送自动化工具,是使用ajax循环请求,curl发送,一次发一万条,但是因为是短连接,很容易超时,经常请求发出去了,但是返回结果是超时,导致发重,后来经过领导指点,使用了websocket和swoole进行了开发,效果非常好,websocket 连接服务端,建立长连接,发送参数过去,然后服务端运行脚本,以cli形式发送,因为websocket建立的是长连接,并且,客户端和服务端的发送数据不再是单向,而是双向的,所以服务端可以实时响应数据到客户端,双方都是通过回调函数进行处理。于是乎,我发现swoole真的是个好东西,所以想学习学习,看了两天文档,准备写个简易聊天室练练手先,废话不多说,先上代码:

首先是客户端代码:

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <style>  
  6.         *{  
  7.             margin:0px;  
  8.             padding:0px;  
  9.         }  
  10.     </style>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div style="margin-left:400px">  
  15.         <div style="border:1px solid;width: 600px;height: 500px;">  
  16.             <div id="msgArea" style="width:100%;height: 100%;text-align:start;resize: none;font-family: 微软雅黑;font-size: 20px;overflow-y: scroll"></div>  
  17.         </div>  
  18.         <div style="border:1px solid;width: 600px;height: 200px;">  
  19.             <div style="width:100%;height: 100%;">  
  20.                 <textarea id="userMsg" style="width:100%;height: 100%;text-align:start;resize: none;font-family: 微软雅黑;font-size: 20px;"></textarea>  
  21.             </div>  
  22.         </div>  
  23.         <div style="border:1px solid;width: 600px;height: 25px;">  
  24.             <button style="float: right;" onclick="sendMsg()">发送</button>  
  25.         </div>  
  26.     </div>  
  27. </body>  
  28.   
  29. </html>  
  30. <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
  31. <script>  
  32.     var ws;  
  33.     $(function(){  
  34.         link();  
  35.     })  
  36.   
  37.     function link () {  
  38.         ws = new WebSocket("ws://192.168.33.10:9501");//连接服务器  
  39.         ws.onopen = function(event){  
  40.             console.log(event);  
  41.             alert('连接了');  
  42.         };  
  43.         ws.onmessage = function (event) {  
  44.             var msg = "<p>"+event.data+"</p>";  
  45.             $("#msgArea").append(msg);  
  46.         }  
  47.         ws.onclose = function(event){alert("已经与服务器断开连接\r\n当前连接状态:"+this.readyState);};  
  48.   
  49.         ws.onerror = function(event){alert("WebSocket异常!");};  
  50.     }  
  51.   
  52.     function sendMsg(){  
  53.         var msg = $("#userMsg").val();  
  54.         ws.send(msg);  
  55.     }  
  56. </script>  
  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Copyright 2010-2021 25230.NET All Rights Reserved.