Web Socket 多个用户之间实现时时消息推送

最新推荐文章于 2024-05-24 16:33:51 发布

齐玉林

最新推荐文章于 2024-05-24 16:33:51 发布

阅读量6.1k

点赞数 1

分类专栏： java html

本文链接：https://blog.csdn.net/qilin001cs/article/details/60873462

版权

java 同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

html

18 篇文章 0 订阅

订阅专栏

1个月不写博客了，最近挺忙的，刚用了2天写了个预约的小程序和大家分享下~

首先大家看下界面：

1.秘书端 - 专门添加预约的内容，添加以后立马在 “市长端” 弹出有一个新的预约

2.市长端 - 专门看最新的预约，看看要不要接待，接待或不接待点击按钮以后以后立马回复秘书

其实挺简单的一个需求啊，但是其中用到的东西还真是挺多的

1.socket server端和 web socket client端中的消息时时分发到各个 client端
2. ajax json 数据查询和UI渲染包括一些css的动画

setp1. 我先按照web的做法把ui和各个页面的效果做出来

setp2. 完善好所有不是实时同步的业务流程

setp3. 根据websocket 分发的数据，挑选是自己的，audio提示：您有一个新的消息，然后调用ajax刷新数据来实现实时同步

setp4. 添加完或者接待完使用send (admin_id,to_admin_id) 方法推送给某个人，然后某个人的ui进行重新ajax渲染

部分代码：

web socket client 端 api.jsp 把所用同步的回调方法和上线，下线，发送，播放声音都放在一个jsp中需要的页面直接：iframe引入

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/config.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>web socket api</title>
    <base href="<%=$.root() %>" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
  </head>
  <body>
  	<audio id="audio" preload="auto" controls="controls" height="100" width="100">
		    <source src="qiyulin/song.ogg" type="audio/ogg" />
		    <source src="qiyulin/song.mp3" type="audio/mp3" />
		 	<embed height="100" width="100" src="qiyulin/song.mp3" />
	</audio>
  	<script type="text/javascript"> var tcp_url='<%=tcp_url %>'; </script>
    <script type="text/javascript" src="qiyulin/prototype.js"></script>
    <script type="text/javascript">
		var ws =null;
		//play
		var play = function(){
			var audio = document.getElementById('audio');
    		audio.play();
		}
		
		//offline
		var offline = function(){
			 log("[WebSocket#close]\n");
             if (ws!=null) {
	             ws.close();
	             ws = null;
	         }
		}
		
		//online 
		var online = function(){
			 if(ws==null){
			      ws = new WebSocket(tcp_url);
			      ws.onopen = function() {
			             log("[WebSocket#onopen]\n");
			             window.parent.online();
			       }
			       ws.onmessage = function(e) {
			            log("[WebSocket#onmessage] Message: '" + e.data + "'\n");
			            window.parent.message(e.data);
			        }
			       ws.onclose = function() {
			            log("[WebSocket#onclose]\n");
			             if (ws) {
				             ws.close();
				             ws = null;
				         }
				         window.parent.offline();
			        }
		        }
		}
		
		//send
		var send = function(admin_id,to_admin_id){
			if(ws!=null){
				var json ='{"admin_id":'+admin_id+',"to_admin_id":'+to_admin_id+'}';
				ws.send(json);
			}else{
				online();
				var json ='{"admin_id":'+admin_id+',"to_admin_id":'+to_admin_id+'}';
				ws.send(json);
			}
		}
		
		 function log(text) {
	        var str=(new Date).getTime() + ": " + (!Object.isUndefined(text) && text !== null ? text.escapeHTML() : "null") ;
	     	console.log(str);
	     }
		
		document.observe("dom:loaded", function() {
		  	 if (!window.WebSocket) {
		          alert("不支持WebSocket!");
		          return;
		      }
			 online();
		});
    </script>
  </body>
</html>

socket server端因为是web的，所以在web.xml中配置一个ContextListener

public class TcpServerListener  implements ServletContextListener{
	
	private TcpServer s;
	
	public void contextInitialized(ServletContextEvent arg0) {
		int port = 8887;
		try {
			s = new TcpServer( port );
			s.start();
			System.out.println( "TCPSERVER START ON PORT: " + s.getPort() );
		} catch (UnknownHostException e) {
			e.printStackTrace();
		}
	}
	public void contextDestroyed(ServletContextEvent arg0) {
		try {
			s.stop();
		} catch (Exception e) {
			e.printStackTrace();
		} 
	}
}

请求json数据 java action 端

public void visitorjson(){
	String page = $.get("p");
	if($.empty(page)) page ="1";
	Map admin = (Map)$.session("admin");
	int s = $.time($.date());
	int e = s+24*60*60;
	String where=" and start_time>"+s+" and start_time<"+e;
	String start="select *";
	String cstart="select count(*) c";
	String sql=" from record where status=1 and admin_id="+admin.get("id")+" "+where;
	String limit =" order by start_time desc ";
	List<Map> list = new ArrayList<Map>();
	StringBuilder count = new StringBuilder("0");
	$.dbcp().query(start+sql+limit,list).count(cstart+sql,count).close();
	$.json("status",1).json("list",list).json("count",count).out();
}

查询list 和共多少条，然后返回json。是不是很优雅~~

$.dbcp().query(sql1,list).count(sql2,count).close();
$.json("status",1).json("list",list).json("count",count).out();

齐玉林

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Web Socket 多个用户之间实现时时消息推送

1个月不写博客了，最近挺忙的，刚用了2天写了个预约的小程序和大家分享下~首先大家看下界面：1.秘书端 - 专门添加预约的内容，添加以后立马在 “市长端” 弹出有一个新的预约2.市长端 - 专门看最新的预约，看看要不要接待，接待或不接待点击按钮以后以后立马回复秘书其实挺简单的一个需求啊，但是其中用到的东西还真是挺多的1.socket server端和 web socket client端中的
复制链接

扫一扫

专栏目录