1, 前端代码 HTML5 部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>WebSocket</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
</head>
<body>
<input id="CreateSocket" type="button" value="创建WebSocKet" />
<input id="Message" type="text" value=""/>
<input id="Send" type="button" value="发送" />
<input id="Close" type="button" value="关闭WebSocket" />
</body>
<script type="text/javascript">
/**
* 创建 WebSocKet 的方法
*/
function createWebSocket(urlValue){
if("WebSocket" in window){
return new WebSocket(urlValue);
}
if ("MozWebSocket" in window){
return new MozWebSocket(urlValue);
}
console.error("浏览器不支持 WebSocKet");
}
/**
* 1, 创建WebSocket
* 2, WebScoket 的地址为ws协议
*/
var webSocket = null;
var urlValue = "ws://localhost/WebTest/WebSocket";
$('#CreateSocket').on('click', function(){
webSocket = createWebSocket(urlValue);
// 服务器返回数据时执行
webSocket.onmessage = function(msg){
console.log(msg.data);
}
// 请求关闭时执行
webSocket.onclose = function(){
console.log(arguments);
}
});
$('#Send').on('click', function(){
var message = $('#Message').val().trim();
if(message == ""){
console.error("发送的内容不能为空!");
return;
}
if(webSocket == null){
console.error("未创建 WebSocket 请求!");
return;
}
// 向服务器发送请求的方法
webSocket.send(message);
$('#Message').val("");
});
</script>
2, JAVA端 WebSocKet 配置类
package socket_web;
import java.util.Set;
import javax.websocket.Endpoint;
import javax.websocket.server.ServerApplicationConfig;
import javax.websocket.server.ServerEndpointConfig;
/**
* 1, webSocket 的配置类, 需要实现接口 ServerApplicationConfig
* 2, webSocket 类在扫描到之后根据需要在实现的方法中进行一定的过滤, 返回过滤后的才能被前端访问
* 3, getAnnotatedEndpointClasses 基于注解的 webSocket 扫描方法
* 4, getEndpointConfigs 基于 XML 配置文件的的 webSocket 扫描方法
*/
public class MyWbeSocketConfig implements ServerApplicationConfig {
@Override
public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> webSockets) {
return webSockets;
}
@Override
public Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> arg0) {
return null;
}
}
3, JAVA 端 WebSocket
package socket_web;
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;
/**
* 1, WebSocket可以通过注解的方式声明 @ServerEndpoint("/WebSocket")
* 2, 添加注解之后需要在配置文件中返回, 在配置文件中可以过滤
* 3, WebSocket 和 Servlet 相同都是多列的, 不会互相干扰
* 4, WebSocket 请求时访问 open 方法, 可以用注解 @OnOpen 标明
* 5, WebSocket 关闭时访问 close 方法, 可以用注解 @OnClose 表名
*/
@ServerEndpoint("/WebSocket")
public class WebSocketDemo {
@OnOpen
public void open(Session session) {
String id = session.getId();
System.out.println("通道 " + id + " 打开");
}
@OnClose
public void close (Session session) {
String id = session.getId();
try {
session.getBasicRemote().sendText("客户端" + id + "关闭成功");
} catch (IOException e) {
System.out.println("客户端" + id + "关闭失败");
}
}
@OnMessage
public void message(Session session, String msg) {
String outMessade = "客户端 " + session.getId() + " 说:" + msg;
System.out.println(outMessade);
String returnMessage = "你刚才说:" + msg;
try {
session.getBasicRemote().sendText(returnMessage);
} catch (IOException e) {
System.out.println("返回数据失败");
}
}
}
