前端websocket通信实现不同pc机器同步刷新前端页面

素颜马尾好姑娘i 2022-10-29 03:10 378阅读 0赞

### 前端websocket的定义： ###

//websocket对象
    import webpack from "vue.config.js"
    //创建websocket连接
    export function createWebSocket(username,callback,closeCb){
    	let socketUrl=`xxx.xxx.xxx.xxx/webSocket/${username}`;
    	//`${webpackUrl.devServer.proxy[process.env.VUE_APP_BASE_API].target}/webSocket/${username}`
    	try{
    		socketUrl = socketUrl.replace("https","ws").replace("http","ws");
    		webSocket = new WebSocket(socketUrl);
    		initwebsocket(callback,close);
    	}catch(e){
    		console.log(e);
    		console.log("尝试创建连接失败");
    	}
    }
    
    //创建连接标识
    let isConnect =false;
    //断线重连之后，延迟5s创建socket连接，res用来存储延迟请求的代码
    let rec;
    export function reConnect(){
    	if(isConnect) return
    	rec&&clearTimeout(rec)
    	//延迟5s连接
    	rec = setTimeout(()=>{
    		createWebsocket()
    	},5000)
    }
    
    export function websocketed(msg){
    	websocket.send(msg);
    }
    
    function initwebsocket(cllback,closeCb){
    	//websocket连接创建之后会调用open方法
    	websocket.onopen= function(e){
    		console.log('open');
    		isConnect = true;
    	}
    	//web服务器收到发送的消息之后
    	webcosket.onmessage = function(e){
    		callback(e)
    	}
    	//当websocket因为种种原因关闭，会调用onclose方法
    	websocket.onclose= function(e){
    			console.log('open')
    			isConnect = false;
    			closeCb(e);
    	}
    	websocket.onerror=function(e){
    		console.log('error',e);
    		isCOnnect = false;
    		reConnect();
    	}
    
    }
    
    
    export function closeWebSocket(){
    		websocket.close();
    }

### 前端websocket的使用：在前端初始化页面的时候使用 ###

//前端的使用websocket
    import {createWebsocket,reConnect} from "@api/websocket.js"
    
    created(){
    	new createWebsocket(
    		this.userName,
    		(data)=>{
    			console.log(data,"websocket");
    			if(data){
    				this.topFlush();
    				this.getlist(); //刷新列表页
    			}
    		},
    		(data)=>{
    			reConnect();
    		}
    	);
    	this.getlist();//刷新列表页
    }

### 后端定义websocket ###

import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    import org.springframework.stereotype.Component;
    import com.alibaba.fastjson.JSONObject;
    
    @Component
    @ServerEndpoint("/webSocket/{username}")
    public class WebSocket{
    	private static int onlineCount = 0;
    	private static Map<String,WebSocket> clients = new ConcurrentHashMap<>();
    	private Session session;
    	private String username;
    
    	@OnOpen
    	public void onOpen(@PathParam("username") String username,Session session) throws IOException{
    		this.username = username;
    		this.session = session;
    		addOnlineCount();
    		clients.put(username,this);
    		System.out.print(username+"已连接");
    	}
    	@OnClose
    	public void onClose()throws IOException{
    		clients.remove(username);
    		subOnlineCount();
    	}
    	@OnMessage
    	public void onMessage(String message) throws IOException{
    		JSONObject jsonTo = JSONObject.parseObject(message);
    		String msg = jsonTo.getString("message");
    		if(!jsonTo.getString("To").equals("All")){
    			sendMessageTo(msg,jsonTo.getString("To").toString());
    		}else{
    			sendMessageAll("给所有人");
    		}
    	}
    	@OnError
    	public void onError(Session session,Throwable error){
    		error.printStackTrace();
    	}
    	public void senMessageTo(String message,String To)throws IOException{
    		for(WebSocket item:clients.values()){
    			if(item.username.equals(To){
    				item.session.getAsyncRemote().sendText(message);
    			}
    		}
    	}
    	public void sendMessageAll(String message) throws IOException{
    		for(WebSocket item:clients.values()){
    			item.session.getAsyncRemote().sendText(message);
    		}
    	}
    	public static synchronized int getOnlineCount(){return onlineCount;}
    	public static synchronized void addOnlineCount(){WebSocket.onlineCount++;}
    	public staitc synchronized void subOnlineCount(){WebSocket.onlineCount--;}
    	public static synchronized Map<String,WebSocket> getClinets(){return clients;}
    }

### 后端使用websocket：在每个控制层的最后使用 ###

WebSocket ws = new WebSocket();
    JSONObject jos = new JSONObject();
    jos.put("message","刷新");
    jos.put("To","All");
    try{
    	ws.onMessage(jos.toJSONString());
    }catch(IOException e){
    	e.printStackTrace();
    }