index.html 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html;charset=utf-8">
  5. <link href="main.css" rel="stylesheet" type="text/css" />
  6. <script src='https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js'></script>
  7. <script src='//cdn.bootcss.com/jquery/1.11.3/jquery.js'></script>
  8. <script src='./notify.js'></script>
  9. </head>
  10. <body>
  11. <div class="notification sticky hide">
  12. <p id="content"> </p>
  13. <a class="close" href="javascript:"> <img src="./icon-close.png" /></a>
  14. </div>
  15. <div class="wrapper">
  16. <div style="width:850px;">
  17. <h3>介绍:</h3>
  18. <b>Web-msg-sender</b> 是一个web消息推送系统,基于<a rel="nofollow" href="https://github.com/walkor/phpsocket.io">PHPSocket.IO</a>开发。<br><br><br>
  19. <h3>支持以下特性:</h3>
  20. <ul>
  21. <li>多浏览器支持</li>
  22. <li>支持针对单个用户推送消息</li>
  23. <li>支持向所有用户推送消息</li>
  24. <li>长连接推送(websocket或者comet),消息即时到达</li>
  25. <li>支持在线用户数实时统计推送(见页脚统计)</li>
  26. <li>支持在线页面数实时统计推送(见页脚统计)</li>
  27. </ul>
  28. <h3>测试:</h3>
  29. 当前用户uid:<b class="uid"></b><br>
  30. 可以通过url:<a id="send_to_one" href="http://www.workerman.net:2121/?type=publish&to=1445590039000&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9" target="_blank"><font style="color:#91BD09">http://<font class="domain"></font>:2121?type=publish&to=<b class="uid"></b>&content=消息内容</font></a> 向当前用户发送消息<br>
  31. 可以通过url:<a href="http://www.workerman.net:2121/?type=publish&to=&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9" target="_blank" id="send_to_all" ><font style="color:#91BD09">http://<font class="domain"></font>:2121?type=publish&to=&content=消息内容</font></a> 向所有在线用户推送消息<br>
  32. <script>
  33. // 使用时替换成真实的uid,这里方便演示使用时间戳
  34. var uid = Date.parse(new Date());
  35. $('#send_to_one').attr('href', 'http://'+document.domain+':2121/?type=publish&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9&to='+uid);
  36. $('.uid').html(uid);
  37. $('#send_to_all').attr('href', 'http://'+document.domain+':2121/?type=publish&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9');
  38. $('.uid').html(uid);
  39. $('.domain').html(document.domain);
  40. </script>
  41. </div>
  42. <script>
  43. $(document).ready(function () {
  44. // 连接服务端
  45. var socket = io('http://'+document.domain+':2120');
  46. // 连接后登录
  47. socket.on('connect', function(){
  48. socket.emit('login', uid);
  49. });
  50. // 后端推送来消息时
  51. socket.on('new_msg', function(msg){
  52. $('#content').html('收到消息:'+msg);
  53. $('.notification.sticky').notify();
  54. });
  55. // 后端推送来在线数据时
  56. socket.on('update_online_count', function(online_stat){
  57. $('#online_box').html(online_stat);
  58. });
  59. });
  60. </script>
  61. <div id="footer">
  62. <center id="online_box"></center>
  63. <center><p style="font-size:11px;color:#555;"> Powered by <a href="http://www.workerman.net/web-sender" target="_blank"><strong>web-msg-sender!</strong></a></p></center>
  64. </div>
  65. </body>
  66. </html>