1.WebSocket编程—Hello World

╰半橙微兮° 2022-01-14 01:37 301阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

# 1.引入jar包 #

<dependencies>
    		
    		<dependency>
    			<groupId>javax.servlet</groupId>
    			<artifactId>javax.servlet-api</artifactId>
    			<version>3.0.1</version>
    		</dependency>
    
    		<dependency>
    			<groupId>javax.servlet</groupId>
    			<artifactId>jstl</artifactId>
    			<version>1.2</version>
    		</dependency>
    		
    		
    		<dependency>
    			<groupId>javax</groupId>
    			<artifactId>javaee-api</artifactId>
    			<version>7.0</version>
    		</dependency>
    		
    		
    		<dependency>
    			<groupId>javax.websocket</groupId>
    			<artifactId>javax.websocket-api</artifactId>
    			<version>1.0</version>
    			<scope>provided</scope>
    		</dependency>
    
    	</dependencies>

服务器使用的是Tomcat7，它自带了websocket-api.jar，所以在pom.xml中的javax.websocket-api使用了scope=provided，方便调试。

# 2.编写服务端代码 #

package cn.net.bysoft.websocketapp.lesson1;
    
    import javax.websocket.OnMessage;
    import javax.websocket.server.ServerEndpoint;
    
    @ServerEndpoint("/echo")
    public class EchoServer {
    	
    	@OnMessage
    	public String echo(String incomingMessage) {
    		return "I got this (" + incomingMessage + ") so I am sending it back !";
    	}
    }

服务端代码是简单的POJO，加入了两个注解，@ServerEndpoint声明了Socket端点，@OnMessage声明了消息处理函数。

# 3.编写客户端代码 #

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Web Socket JavaScript Echo Client</title>
    </head>
    <body>
    	<h1>Echo Server</h1>
    
    	<div style="text-align: left;">
    		<form action="">
    			<input onclick="send_echo();" value="Press to send" type="button">
    			<input id="textID" name="message" value="Hello Web Sockets"
    				type="text"> <br>
    		</form>
    	</div>
    
    	<div id="output"></div>
    </body>
    
    <script>
    	var echo_websocket;
    
    	function init() {
    		output = document.getElementById("output");
    	}
    
    	function send_echo() {
    		// 定义websocket的端点地址
    		var wsUri = "ws://localhost:8080/websocketapp/echo";
    		writeToScreen("Connecting to " + wsUri);
    		// 创建websocket对象
    		echo_websocket = new WebSocket(wsUri);
    		
    		// 打开websocket
    		echo_websocket.onopen = function(evt) {
    			writeToScreen("connected!");
    			// 发送文本框中的内容到服务端
    			doSend(textID.value);
    		}
    		
    		// 接收到服务端处理的数据
    		echo_websocket.onmessage = function(evt) {
    			writeToScreen("Received message: " + evt.data);
    			// 关闭websocket
    			echo_websocket.close();
    			writeToScreen("Closed!");
    		}
    
    		echo_websocket.onerror = function(evt) {
    			writeToScreen("<span style='color: red'>ERROR:</span>" + evt.data);
    			echo_websocket.close();
    		}
    	}
    
    	function doSend(message) {
    		echo_websocket.send(message);
    		writeToScreen("Sent message:" + message);
    	}
    
    	function writeToScreen(message) {
    		var pre = document.createElement("p");
    		pre.style.wordWrap = "break-word";
    		pre.innerHTML = message;
    		output.appendChild(pre);
    	}
    
    	window.addEventListener("load", init, false);
    </script>
    </html>

接下来是客户端是测试代码，点击按钮进行测试。

![124612_P94C_2981366.png][]

源码地址：[https://github.com/XuePeng87/websocketapp][https_github.com_XuePeng87_websocketapp]

转载于:https://my.oschina.net/u/2981366/blog/776431

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/ed65461a89d34762b98548ecdf2c5010.png
[124612_P94C_2981366.png]: /images/20220113/e18eaeb96f4949dca1d45bd6e2be07a9.png
[https_github.com_XuePeng87_websocketapp]: https://github.com/XuePeng87/websocketapp