websocket入门案例(echo)

绝地灬酷狼 2024-02-19 18:33 8阅读 0赞

websocket是用来干什么的，具体的请自行百度。

本文实现一个简单的websocket的入门小例子，实现客户端发送一句换，服务器端返回。即一个简单的交互。

**一、服务器端的实现**

1.创建一个类实现ServerApplicationConfig接口

2.编写一个后台websocket服务类，使用@ServerEndpoint注解标注。

第一步代码：

/**
     * 该类在服务器启动时，会自动执行
     * 
     * @author huan
     *
     */
    public class EchoConfig implements ServerApplicationConfig {
    	private Logger log = Logger.getLogger(EchoConfig.class);
    	/**
    	 * 基于注解的实现方式,<br />
    	 * classess 中的类是实现了有@ServerEndpoint标注的类
    	 */
    	@Override
    	public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> classes) {
    		log.info("服务器启动...");
    		for (Class<?> clazz : classes) {
    			log.info("加载的websocket服务类:" + clazz.getName());
    		}
    		return classes;
    	}
    
    	/**
    	 * 基于接口的实现方式
    	 */
    	@Override
    	public Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> arg0) {
    		return null;
    	}
    }

第二步代码：

@ServerEndpoint("/echo4me")
    public class EchoServer {
    	private static Logger log = Logger.getLogger(EchoServer.class);
    	public EchoServer() {
    	}
    	@OnOpen
    	public void open(Session session) throws IOException {
    		log.info("一个客户端建立连接: websocket session id -> " + session.getId());
    		if (session.isOpen()) {
    			session.getBasicRemote().sendText("欢迎建立连接.");
    		}
    	}
    	@OnClose
    	public void onClose() {
    		log.info("websocket关闭.");
    	}
    	@OnMessage
    	public void onMessage(Session session, String msg) {
    		log.info("客户端发送的消息:" + msg);
    		if (session.isOpen()) {
    			try {
    				session.getBasicRemote().sendText("服务器返回的数据："+msg);
    			} catch (IOException e) {
    				e.printStackTrace();
    			}
    		}
    	}
    }

**注意：1、上面的类中必须要有一个无参数的构造器方法**

**2、方法中的参数 session 并不是httpsession,而是websocket中的session**

**3、@ServerEndpoint("/echo4me")标注的类不用再配置中配置，它表示一个websocket的服务端，echo4me表示访问的路径, 即访问路径为:http://localhost:端口/项目部署名/echo4me**

**4、@OnMessage表示客户端发送消息过来时触发。**

**二、前台的写法：**

**1.创建websocket请求，**

**2.打开请求**

**3.发送数据**

**js部分：**

<strong><script type="text/javascript">
    	var ws = null;
    	function openConnection(){
    		var target = "ws://localhost:8080/study-websocket/echo4me"
    		if ('WebSocket' in window) {
    	        ws = new WebSocket(target);
    	    } else if ('MozWebSocket' in window) {
    	        ws = new MozWebSocket(target);
    	    } else {
    	        alert('WebSocket is not supported by this browser.');
    	        return;
    	    }
    		console.info('连接websocket成功.');
    		ws.onopen = function(){
    		}
    		ws.onerror = function(e){
    			console.info("发生错误:");
    			console.warn(w);
    		}
    		ws.onmessage = function(e){
    			$('#serverReturnData').val($('#serverReturnData').val()+e.data);
    		}
    		ws.onclose = function(e){
    			console.info("websocket关闭");
    			console.log(e);
    		}
    	}
    
    	$(function(){
    		/** 发送数据到服务器端 */
    		$('#sendBtn').on('click',function(){
    			var val = $('#sendData').val();
    			if(val){
    				if(ws){
    					ws.send(val);
    				}else{
    					alert('请先创建websocket连接.')
    				}
    			}else{
    				alert("请输入要发送给服务器端的数据.");
    			}
    		})
    	});
    </script></strong>

**注意:此处的url为 echo4me为@ServerEndpoint注解中value属性的值**

<strong>var target = "ws://localhost:8080/study-websocket/echo4me" 
    </strong>

**html代码部分：**

<strong><button id="openWebsocket" onclick="openConnection()">连接服务器：</button><br/>
    	发送数据到服务器：<input id="sendData" /><input type="button" id="sendBtn" value="发送"/> <br/>
    	服务器返回的数据：<input id="serverReturnData" style="width: 100%;color: red;"/></strong>

**到此，前后台都实现。**

**前后台交互的图片  
![aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDExMS8zNTY1L2Q4MWViOGNlLWZhYTMtM2U1Mi05YmU4LThhNzUzYTI4YTViYi5wbmc][]**

[aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDExMS8zNTY1L2Q4MWViOGNlLWZhYTMtM2U1Mi05YmU4LThhNzUzYTI4YTViYi5wbmc]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/57abfc375e834b67a152dbdb7fb928b1.png