核心提示:1.使用Eclipse+Tomcat8环境进行演示2.创建一个Servlet用于接收客户端的请求数据,并进行处理package com.jCuckoo.server;import java.io.IO...
1.使用Eclipse+Tomcat8环境进行演示
2.创建一个Servlet用于接收客户端的请求数据,并进行处理
package com.jCuckoo.server; import java.io.IOException; import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; /** * 在tomcat7中存在WebSocketServlet类(但已经过时),在tomcat8中彻底删除 * 此处使用@ServerEndpoint注解,主要是将目前的类定义成一个websocket服务器端 * 注解的值将被用于监听用户连接的终端访问URL地址 */ @ServerEndpoint(“/websocket”) public class WebSocketTest { /** * 当服务器接收到客户端发送的消息时所调用的方法 * 该方法可能包含一个javax.websocket.Session可选参数 * 如果有这个参数,容器将会把当前发送消息客户端的连接Session注入进去 */ @OnMessage public void onMessage(String message,Session session) throws IOException, InterruptedException { // 打印从客户端获取到的信息 System.out.println(”从客户端接收到的信息: ” + message); //向客户端第一次发送信息 session.getBasicRemote().sendText(”=======向客户端第一次发送信息=======”); //每秒向客户端发送一次信息,连续发送3次 int sentMessages = 0; while (sentMessages < 3) { Thread.sleep(1000); session.getBasicRemote().sendText(”即时发送信息,当前是第 ” + sentMessages+“次…”); sentMessages++; } // 向客户端发送最后一次信息 session.getBasicRemote().sendText(”=======向客户端发送最后一次信息=======”); } /** * 当一个新用户连接时所调用的方法 * 该方法可能包含一个javax.websocket.Session可选参数 * 如果有这个参数,容器将会把当前发送消息客户端的连接Session注入进去 */ @OnOpen public void onOpen(Session session) { System.out.println(”客户端连接成功”); } /** 当一个用户断开连接时所调用的方法*/ @OnClose public void onClose() { System.out.println(”客户端关闭”); } }
package com.jCuckoo.server; import java.io.IOException; import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; /** * 在tomcat7中存在WebSocketServlet类(但已经过时),在tomcat8中彻底删除 * 此处使用@ServerEndpoint注解,主要是将目前的类定义成一个websocket服务器端 * 注解的值将被用于监听用户连接的终端访问URL地址 */ @ServerEndpoint("/websocket") public class WebSocketTest { /** * 当服务器接收到客户端发送的消息时所调用的方法 * 该方法可能包含一个javax.websocket.Session可选参数 * 如果有这个参数,容器将会把当前发送消息客户端的连接Session注入进去 */ @OnMessage public void onMessage(String message,Session session) throws IOException, InterruptedException { // 打印从客户端获取到的信息 System.out.println("从客户端接收到的信息: " + message); //向客户端第一次发送信息 session.getBasicRemote().sendText("=======向客户端第一次发送信息======="); //每秒向客户端发送一次信息,连续发送3次 int sentMessages = 0; while (sentMessages < 3) { Thread.sleep(1000); session.getBasicRemote().sendText("即时发送信息,当前是第 " + sentMessages+"次..."); sentMessages++; } // 向客户端发送最后一次信息 session.getBasicRemote().sendText("=======向客户端发送最后一次信息======="); } /** * 当一个新用户连接时所调用的方法 * 该方法可能包含一个javax.websocket.Session可选参数 * 如果有这个参数,容器将会把当前发送消息客户端的连接Session注入进去 */ @OnOpen public void onOpen(Session session) { System.out.println("客户端连接成功"); } /** 当一个用户断开连接时所调用的方法*/ @OnClose public void onClose() { System.out.println("客户端关闭"); } }
3.在HTML5 页面中使用WebSocket与服务器端进行交互
<!DOCTYPE html> <html> <head> <title>HTML5 WebSocket测试</title> </head> <body> <p> <input type=“button” value=“Start” onclick=“start()” /> </p> <p id=“messages”></p> <script type=“text/javascript”> var webSocket = new WebSocket(‘ws://localhost:8080/WebSocket/websocket’); webSocket.onerror = function(event) { alert(event.data); }; //与WebSocket建立连接 webSocket.onopen = function(event) { document.getElementById(‘messages’).innerHTML = ‘与服务器端建立连接’; }; //处理服务器返回的信息 webSocket.onmessage = function(event) { document.getElementById(‘messages’).innerHTML += ’<br />‘+ event.data; }; function start() { //向服务器发送请求 webSocket.send(‘我是jCuckoo’); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <title>HTML5 WebSocket测试</title> </head> <body> <p> <input type="button" value="Start" onclick="start()" /> </p> <p id="messages"></p> <script type="text/javascript"> var webSocket = new WebSocket('ws://localhost:8080/WebSocket/websocket'); webSocket.onerror = function(event) { alert(event.data); }; //与WebSocket建立连接 webSocket.onopen = function(event) { document.getElementById('messages').innerHTML = '与服务器端建立连接'; }; //处理服务器返回的信息 webSocket.onmessage = function(event) { document.getElementById('messages').innerHTML += '<br />'+ event.data; }; function start() { //向服务器发送请求 webSocket.send('我是jCuckoo'); } </script> </body> </html>
4.项目组织结构

5.运行测试结果
