HTML5 WebSocket DEMO示例

最新推荐文章于 2024-04-25 15:31:38 发布

iteye_11495

最新推荐文章于 2024-04-25 15:31:38 发布

阅读量503

点赞数

文章标签：网络开发工具 java

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("客户端关闭");
	}
}

3.在HTML5 页面中使用WebSocket与服务器端进行交互

<!DOCTYPE html>
<html>
<head>
<title>HTML5 WebSocket测试</title>
</head>
<body>
	<div>
		<input type="button" value="Start" οnclick="start()" />
	</div>
	<div id="messages"></div>
	<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.运行测试结果

iteye_11495

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 WebSocket DEMO示例

1.使用Eclipse+Tomcat8环境进行演示2.创建一个Servlet用于接收客户端的请求数据，并进行处理package com.jCuckoo.server;import java.io.IOException;import javax.websocket.OnClose;import javax.websocket.OnMessage;import javax.we...
复制链接

扫一扫