首先,本人对这个技术的研究深度并不是很深,所以下面都是一些基本的,比较浅显的知识点而已,自己作为学习记录所用
1,首先说一下为啥会有这个应用问题,学习javaweb有一段时间了,在接触的过程中就遇到一个问题,就是一些操作我需要很频繁的在服务器与页面之间进行操作,之前问过一些人,他们也没有给出很好的答案和做法,基本上都是两点,一个是js中设置定时任务,每隔一段时间就像后台发送请求,这样导致整个项目的性能降低很多。另一个就是和原来的基本一样,就是发起后让他停着直到有符合要求的结果的时候再返回。但是这样很不好,如果我的要求是实时数据不论什么结果都要返回,不是就不可以了么
2,webSocket的重大意义:解决了原来的web模式中服务器端的被动发送消息的缺陷。原来的web服务器都是客户端发出请求,然后他再进行响应,没法进行主动的消息推送,这主要也是和它原来是使用Http协议有关。现在的webSocket是基于TCP/IP协议进行运作的。基本的操作就是客户端发出到服务器的请求,服务器与客户端建立TCP连接,然后这个连接在不主动进行关闭操作时不会关闭。至此,服务器就可以向前端页面进行数据推送,而不必向之前每次推送都进行连接建立,而且还获得了主动性。总之:实现了高性能的由后端服务器到页面的主动的数据推送。在实时性要求很高的应用环境中相当适用。
3,应用要求:Tomcat 7以上,浏览器则是谷歌或者火狐,具体的版本啥的各位百度吧,网上有,不过我没有具体进行详细的测试关于版本
关于前端页面部分发起tcp请求,所以这里运用到HTML5的基本技术
而java后端则需要webSocket的API,这个API可以在Tomcat服务器中的lib(tomcat的jar包集合)中找到:webSocket-api.jar
4,下面是具体的代码:
页面:
<!DOCTYPE html>
<html>
<head>
<title>Testing websockets</title>
</head>
<body>
<div>
<input type="submit" value="Start" οnclick="start()" />
</div>
<div id="messages"></div>
<script type="text/javascript">
var webSocket = new WebSocket('ws://localhost:8090/SpringMVC1.0/websocket');
webSocket.onerror = function(event) {
onError(event);
};
webSocket.onopen = function(event) {
onOpen(event);
};
webSocket.onmessage = function(event) {
onMessage(event);
};
function onMessage(event) {
document.getElementById('messages').innerHTML
+= '<br />' + event.data;
}
function onOpen(event) {
document.getElementById('messages').innerHTML
= 'Connection established';
}
function onError(event) {
alert(event.data);
alert("error");
}
function start() {
webSocket.send("ren-k");
return false;
}
</script>
</body>
</html>
后台:
package websocket;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint(value="/webSocketQQ")
public class MnQQTest {
public static List<String> sjStory;
@OnMessage
public void onMessage(String message, Session session)
throws IOException, InterruptedException {
sjStory.add(message);
int sentMessages = 0;
String mykey = message.split("-")[0];
while(true){
Thread.sleep(200);
Iterator<String> sjst = sjStory.iterator();
while(sjst.hasNext()){
String[] nr = sjst.next().split("-");
if(!nr[0].equals(mykey)){
session.getBasicRemote().sendText(nr[0]+":"+nr[1]);
sjst.remove();
}
}
}
}
@OnOpen
public void onOpen () {
System.out.println("Client connected");
}
@OnClose
public void onClose () {
System.out.println("Connection closed");
}
}
5,操作总结
页面
在页面是基本操作包括:建立与后台的TCP连接,发送数据
建立连接的主要操作是:var webSocket = new WebSocket('ws://localhost:8090/SpringMVC1.0/webSocketQQ');
这就是在HTML5中建立TCP连接的方式,之后的发送操作什么的全是通过webSocket对象操作即可,ws://即代表要建立长连接,后面则是后端服务器地址(处理对应操 作的contrller,就是后台代码而已)
还有就是发送用send方法即可,详情参见代码
后端(在这段代码里面家有注解,但是此处的类并没有在web.xml中配置也没有在框架中扫描,个人理解应该是凡是有ServerEndpoint注解的类在Tomcat7以上服务器中会自动进 行处理,让其可以与页面建立TCP连接)
这里可能有很多的注解方法顾名思义,Onopen,Onclose即代表在创建和关闭连接时执行的方法,而主要的操作主要是在omMessage方法中进行,参数Message即为前台传递 的数据,session则是可以进行操作向前端主动推送数据
发送的具体代码是:session.getBasicRemote().sendText();括号中即为数据