接着上一篇的环境,我们接下来弄了个WebSocketTest2
目录结构
jquery-1.12.3.js(贴心服务)
WebSocketTest2.java
package com.hust.websockettest;
import java.io.IOException;
import java.util.Queue;
import java.util.Set;
import java.util.concurrent.ConcurrentLinkedQueue;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/websocket2")
public class WebSocketTest2 {
/**
* 存储当前有效的session对象
*/
private static Queue<Session> sessionSet = new ConcurrentLinkedQueue<Session>();
@OnMessage
public void onMessage(String message, Session currentSession) {
System.out.println("Server say:Received: " + message);
try {
final Set<Session> sessions = currentSession.getOpenSessions();
// 客户端互相发送消息
for (Session session : sessions) {
session.getBasicRemote().sendText(message);
}
/************ 启动定时公告 **************/
//SystemTimer.getInstance();
/**************************/
} catch (IOException e) {
e.printStackTrace();
}
}
@OnOpen
public void onOpen(Session currentSession) {
if (sessionSet.contains(currentSession) == false) {
sessionSet.add(currentSession);
System.out.println("WebSocketTest.onOpen()================Add=" + sessionSet.size());
}
System.out.println("Server say:Client connected");
}
@OnClose
public void onClose(Session currentSession) {
if (sessionSet.contains(currentSession)) {
sessionSet.remove(currentSession);
}
System.out.println("Server say:Connection closed============Close=" + sessionSet.size());
}
public static Queue<Session> getSessionSet() {
return sessionSet;
}
}
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<style type="text/css">
.infos {
list-style-type: none;
}
.infos li {
border: 1px solid #EEE;
margin: 2px;
font-size: 12px;
line-height: 25px;
height: 25px;
}
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
</style>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript">
var webSocket = null;
var flag = true;//全局标记位,标记浏览器是否支持websocket
$(function() {
if (!window.WebSocket) {
$("body").append("<h1>你的浏览器不支持WebSocket</h1>");
flag = false;
return;
}
});
function startConnect() {
if (flag == false) {
return;
}
var url = "ws://localhost:8080/WebSocketTest/websocket2";
webSocket = new WebSocket(url);
webSocket.onerror = function(event) {
onError(event)
};
webSocket.onopen = function(event) {
onOpen(event)
};
webSocket.onmessage = function(event) {
onMessage(event)
};
//webSocket.send("客户端给服务端发送消息:hello,start");
}
function onMessage(event) {
$(".infos").append("<li class='blue'>" + event.data + "</li>");
}
function onOpen(event) {
$(".infos").append("<li class='green'>已连接至服务器</li>");
$("#startBtn").prop("disabled", true);
$("#sendMessageBtn").prop("disabled", false);
}
function onError(event) {
$(".infos").append("<li class='red'>连接服务器发生错误</li>");
}
function sendMessage() {
var msg = "[" + $("#username").val() + "]:"
+ $("#message_input_id").val();//获取发送信息
webSocket.send(msg);//向服务器发送消息
//不需要将此信息追加到列表,由后台统一将消息发送给所有
//$(".infos").append("<li class='green'>" + msg + "</li>");//将消息添加至本地列表
$("#message_input_id").val("");//清空消息
}
</script>
</head>
<body>
<ul class="infos">
<li class="red">提示:点击开始连接将连接到服务器</li>
</ul>
<br />
<br />
<input type="button" value="开始连接" id="startBtn"
onclick="startConnect()" />
<br />
<br /> 输入名称:
<input id="username" value="<%=(int) (Math.random() * 1000)%>"
style="width: 50px; margin-right: 5px;" />
<input id="message_input_id" />
<input type="button" value="发送消息" id="sendMessageBtn"
disabled="disabled" onclick="sendMessage()" />
</body>
</html>
运行截图
看图基本明白,第一个是我连接之后断开额,二三是一起连接着的,所以后台会显示add=2。就是可以多个一起链接,而且是长连接。