• Java WebSocket的简单使用


    Java WebSocket的简单使用

    此案例主要使用WebSocket实现代理系统发布公告时,App端可以实时显示出来

    代码:

    前台
    • App端
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    
    	<body>
    		<h1>App手机客户端</h1>
    		<div id="">
    			<ul id="notice">
    			</ul>
    		</div>
    		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    		<script type="text/javascript">
    			//向公告内容里面插入新公告
    			function addNotice(content) {
    				//向ul>li插入公告
    				var ul = $('#notice').append('<li>' + content + '</li>')
    			}
    
    			//初始化WebSocket连接
    			//判断当前浏览器是否支持WebSocket  
    			if('WebSocket' in window) {
    				console.log('浏览器支持WebSocket')
    				websocket = new WebSocket("ws://192.168.0.118:8085/myssh/websocket/server/app");
    			} else {
    				alert('当前浏览器不支持 websocket')
    			}
    			
    			//连接发生错误的回调方法  
    			websocket.onerror = function() {
    				console.log("WebSocket连接发生错误");
    			};
    
    			//连接成功建立的回调方法  
    			websocket.onopen = function() {
    				websocket.send('APP客户端连接成功');
    			}
    
    			//接收到消息的回调方法  
    			websocket.onmessage = function(event) {
    				addNotice(event.data);
    			}
    
    			//连接关闭的回调方法  
    			websocket.onclose = function() {
    				console.log("WebSocket连接关闭");
    			}
    
    			//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。  
    			window.onbeforeunload = function() {
    				closeWebSocket();
    			}
    
    			//关闭WebSocket连接  
    			function closeWebSocket() {
    				websocket.close();
    			}
    		</script>
    	</body>
    </html>
    
    • 代理
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<h1>后台管理系统</h1>
    		<span id="">
    			此案例主要使用WebSocket实现后台管理系统发布公告时,App端可以实时显示出来
    		</span>
    		<hr />
    		<input id="msg" placeholder="公告内容"/>
    		<input type="button" value="发送" id="send"/>
    		
    		
    		<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
    		<script type="text/javascript">
    			//判断当前浏览器是否支持WebSocket  
    			if('WebSocket' in window) {
    				console.log('浏览器支持WebSocket')
    				websocket = new WebSocket("ws://192.168.0.118:8085/myssh/websocket/server/代理");
    			} else {
    				alert('当前浏览器不支持 websocket')
    			}
    
    			//连接发生错误的回调方法  
    			websocket.onerror = function() {
    				console.log("WebSocket连接发生错误");
    			};
    
    			//连接成功建立的回调方法  
    			websocket.onopen = function() {
    				websocket.send('代理端连接成功');
    			}
    
    			//接收到消息的回调方法  
    			websocket.onmessage = function(event) {
    				console.log(event.data)
    			}
    
    			//连接关闭的回调方法  
    			websocket.onclose = function() {
    				console.log("WebSocket连接关闭");
    			}
    
    			//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。  
    			window.onbeforeunload = function() {
    				closeWebSocket();
    			}
    
    			//关闭WebSocket连接  
    			function closeWebSocket() {
    				websocket.close();
    			}
    			
    			
    			/**
    			 * 发布公告
    			 */
    			$('#send').click(()=>{
    				//alert(1)
    				//获取公告内容
    				websocket.send($('#msg').val());
    			})
    			
    		</script>
    	</body>
    </html>
    
    
    后台[就只有一个类,使用的是tomcat的websocket实现,文章结尾会介绍其他方法]
    package com.ssh.socket;
    
    import java.util.Map;
    import java.util.concurrent.ConcurrentHashMap;
    
    import javax.websocket.OnClose;
    import javax.websocket.OnError;
    import javax.websocket.OnMessage;
    import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    
    /**
     * 后台管理系统发布公告
     * @author asus
     *
     */
    /**
     * @ServerEndpoint和springMVC @RequestMapping有点像,就是一个用来处理http/https请求的,一个是用来处理ws/wss请求的
     * "/websocket/server/{username}"这个也是对应的前端的请求地址:"ws://192.168.0.118:8085/myssh/websocket/server/代理"
     * 前端请求webSocket就不是使用http了,而是ws
     * {username}对应的就是“代理”了,这种写法是为了获取前端请求路径上面的参数,这里必须要写,否则下面的@PathParam("username")获取不到参数
     */
    @ServerEndpoint("/websocket/server/{username}")
    public class WebSocketServer {
    	
    	//用于存放所有连接进来的客户端
    	private static Map<String, WebSocketServer> clients = new ConcurrentHashMap<String, WebSocketServer>();  
    	
    	private Session session;  
        private String username; 
    	
    	@OnOpen  
    	public void onOpen(@PathParam("username") String username, Session session) {  
    		session.getAsyncRemote().sendText("服务器接收到了客户端的连接请求!");
    		
    		this.username = username;
    		this.session = session;
    		
    		clients.put(username, this);
    	}  
    
    	@OnClose  
    	public void onClose() {  
    		System.out.println("后台管理系统已关闭连接");  
    	}  
    
    	@OnMessage  
    	public void onMessage(@PathParam("username") String username, String message)  {  
    		System.err.println("接收到客户端的消息:" + message);
    		/**
    		 * 通知所有人[包括代理和用户]
    		 */
    		for (WebSocketServer item : clients.values()) {
                item.session.getAsyncRemote().sendText(this.username + " : " + message);  
            }  
    	}  
    
    	@OnError  
    	public void onError(Session session, Throwable error) {  
    		error.printStackTrace();  
    	}  
    }
    
    
    

    讲解

    实际上是两个前端都连接至后台,然后后台将两个客户端都存入Map集合中,当然也可以自己定义一个类来存放用户和代理的信息,可以用来区分连接进来的是代理还是用户,此案例中没有进行代理和用户之间的区分,只是单纯的实现代理实时向用户[客户端]发送消息,发送消息就是通过循环去发送[因为之前已经把所有用户都存入Map],相当于每个连接进来的用户都是一个独立的连接,如果自己添加什么东西进行区分代理和用户,也可以在此基础上实现只给用户发送消息。

    其他方法参考
    Java后端WebSocket的Tomcat实现


    作者:不敲代码的攻城狮
    出处:https://www.cnblogs.com/leigq/
    任何傻瓜都能写出计算机可以理解的代码。好的程序员能写出人能读懂的代码。

     
  • 相关阅读:
    object detection物体检测基本概念
    anaconda python环境搭建
    Eclipse环境下添加package到工程的classpath
    34-使用函数实现-文件拷贝
    33-使用函数实现-斐波那契数列
    32-简单的位置参数
    31-分段进行文件拷贝
    30-Python文件拷贝
    29-简单的文件对象基础操作
    28-石头剪刀布:三局两胜
  • 原文地址:https://www.cnblogs.com/leigq/p/13406577.html
Copyright © 2020-2023  润新知