目的:前台js调用后端WebSocket,后端WebSocket定时发送数据给前端,前端实时更新。
技术路线:tomcat,不适用任何框架。
第一步,前端html和js。
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var ws;
var target = "ws://localhost:8080/web2/socket";
function onopen() {
if ('WebSocket' in window) {
ws = new WebSocket(target);
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(target);
} else {
alert('WebSocket is not supported by this browser.');
return;
}
ws.onmessage = function(evt) {
document.getElementById("one").innerHTML = evt.data;
}
}
</script>
</head>
<body>
<button id="btn" onclick="onopen()"></button>
<div id="one"></div>
</body>
</html>
第二步,后端WebSocket。
DevInfoSocket.java
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
//注意,这里映射websocket的地址中,前面一定要加/,否则无法访问。
@ServerEndpoint(value = "/socket")
public class DevInfoSocket {
@OnOpen
public void onOpen(Session session) throws InterruptedException {
//注意,这个session是javax包中的,他和我们平常说的web session不是同一个东东。
System.out.println("-----------进入websocket的onopen");
int param = 1;
while (true) {
//关键是下面这一句,向前端发送了消息,当然你还可以发送其他类型的消息。
session.getAsyncRemote().sendText(String.valueOf(param));
param ++;
//获取当前线程,并让线程睡眠一会。模拟日常业务逻辑,比如定时查询数据库,
//返回最新数据。
Thread currentThread = Thread.currentThread();
currentThread.sleep(5000);
}
}
//当然,还有@onMessage和@onClose方法,这里没有实现。
}
第三步,调试吧,祝您顺利。
Springboot也集成了WebSocket的实现,下一遍笔记中将以此为例做尝试。