###背景
SocketIO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口,也就是说,我们在使用SocketIO时,不用担心兼容问题,底层会自动选用最佳的通信方式。WebSocket是SocketIO的一个子集。
项目告警原来是ajax轮询的机制向后台请求,这种会有很多无效的请求;现在用netty-socketio产生告警实时给前端推送,解决了ajax多无效请求的问题,告警的处理方式比ajax优雅。
###0准备
netty-socketio的jar包,maven坐标如下,前台需要socket.io.js,jquery-1.7.2.min.js
<groupId>com.corundumstudio.socketio</groupId>
<artifactId>netty-socketio</artifactId>
<version>1.7.3</version>
###1 后台代码
package com.corundumstudio.socketio.demo.test;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Random;
import java.util.Timer;
import java.util.TimerTask;
import com.corundumstudio.socketio.Configuration;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.listener.ConnectListener;
public class Server {
private static List<SocketIOClient> clients = new ArrayList<SocketIOClient>();//用于保存所有客户端
public static void main(String[] args) throws Exception {
Configuration configuration = new Configuration();
configuration.setHostname("127.0.0.1");//设置主机名
configuration.setPort(8082);//设置监听的端口号
SocketIOServer server = new SocketIOServer(configuration);//根据配置创建服务器对象
server.addConnectListener(new ConnectListener() {//添加客户端连接监听器
@Override
public void onConnect(SocketIOClient client) {
System.out.println("connected:SessionId=" + client.getSessionId());
clients.add(client);//保存客户端
}
});
server.start();
System.out.println("server started");
Timer timer = new Timer();
timer.schedule(new TimerTask() {
@Override
public void run() {
Random random = new Random();
for(SocketIOClient client : clients) {
Date currentTime = new Date();
SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String dateString = formatter.format(currentTime);
System.out.println(dateString);
client.sendEvent("pushpoint", dateString);//每隔一秒推送一次
}
}
}, 1000, 1000);
}
}
###2 前台代码
<!DOCTYPE html>
<html>
<head>
<title>netty-socketio测试</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script src="js/socket.io/socket.io.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
var socket = io.connect('http://127.0.0.1:8082');
//监听名为pushpoint的事件,这与服务端推送的那个事件名称必须一致
socket.on("pushpoint", function(data){
$('#x').text(data);
});
});
</script>
</head>
<body>
<div id="display" style="height:50px;background-color:blue;vertical-align: middle;text-align: center; margin: auto; ">
<span id="x" style="color:#FFFFFF"></span>
</div>
</body>
</html>
3 结果
时间会实时变化