1.引入jar包
1<dependencies> 2 <!-- servlet --> 3 <dependency> 4 <groupId>javax.servlet</groupId> 5 <artifactId>javax.servlet-api</artifactId> 6 <version>3.0.1</version> 7 </dependency> 8 9 <dependency> 10 <groupId>javax.servlet</groupId> 11 <artifactId>jstl</artifactId> 12 <version>1.2</version> 13 </dependency> 14 15 <!-- https://mvnrepository.com/artifact/javax/javaee-api --> 16 <dependency> 17 <groupId>javax</groupId> 18 <artifactId>javaee-api</artifactId> 19 <version>7.0</version> 20 </dependency> 21 22 <!-- https://mvnrepository.com/artifact/javax.websocket/javax.websocket-api --> 23 <dependency> 24 <groupId>javax.websocket</groupId> 25 <artifactId>javax.websocket-api</artifactId> 26 <version>1.0</version> 27 <scope>provided</scope> 28 </dependency> 29 30 </dependencies>
服务器使用的是Tomcat7，它自带了websocket-api.jar，所以在pom.xml中的javax.websocket-api使用了scope=provided，方便调试。
2.编写服务端代码
1package cn.net.bysoft.websocketapp.lesson1; 2 3import javax.websocket.OnMessage; 4import javax.websocket.server.ServerEndpoint; 5 6@ServerEndpoint("/echo") 7public class EchoServer { 8 9 @OnMessage 10 public String echo(String incomingMessage) { 11 return "I got this (" + incomingMessage + ") so I am sending it back !"; 12 } 13}
服务端代码是简单的POJO，加入了两个注解，@ServerEndpoint声明了Socket端点，@OnMessage声明了消息处理函数。
3.编写客户端代码
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>Web Socket JavaScript Echo Client</title> 6</head> 7<body> 8 <h1>Echo Server</h1> 9 10 <div style="text-align: left;"> 11 <form action=""> 12 <input onclick="send_echo();" value="Press to send" type="button"> 13 <input id="textID" name="message" value="Hello Web Sockets" 14 type="text"> <br> 15 </form> 16 </div> 17 18 <div id="output"></div> 19</body> 20 21<script> 22 var echo_websocket; 23 24 function init() { 25 output = document.getElementById("output"); 26 } 27 28 function send_echo() { 29 // 定义websocket的端点地址 30 var wsUri = "ws://localhost:8080/websocketapp/echo"; 31 writeToScreen("Connecting to " + wsUri); 32 // 创建websocket对象 33 echo_websocket = new WebSocket(wsUri); 34 35 // 打开websocket 36 echo_websocket.onopen = function(evt) { 37 writeToScreen("connected!"); 38 // 发送文本框中的内容到服务端 39 doSend(textID.value); 40 } 41 42 // 接收到服务端处理的数据 43 echo_websocket.onmessage = function(evt) { 44 writeToScreen("Received message: " + evt.data); 45 // 关闭websocket 46 echo_websocket.close(); 47 writeToScreen("Closed!"); 48 } 49 50 echo_websocket.onerror = function(evt) { 51 writeToScreen("<span style='color: red'>ERROR:</span>" + evt.data); 52 echo_websocket.close(); 53 } 54 } 55 56 function doSend(message) { 57 echo_websocket.send(message); 58 writeToScreen("Sent message:" + message); 59 } 60 61 function writeToScreen(message) { 62 var pre = document.createElement("p"); 63 pre.style.wordWrap = "break-word"; 64 pre.innerHTML = message; 65 output.appendChild(pre); 66 } 67 68 window.addEventListener("load", init, false); 69</script> 70</html>
接下来是客户端是测试代码，点击按钮进行测试。
