消息实时推送可使得用户及时获取相关的信息，增加工作的处理效率，获得更好的交互体验。消息推送的应用场景举例
---新内容提示——新文章，新视频，新留言
---任务列表提示——下午6点有视频会议，有两个审批文件需要批复，下午4点巡逻A区
---操作状态提示——你上传的视频已经压缩完毕，你发布的文章已被收录
---指引性提示——数据文件已处理完毕，请进行下一步操作
比较一下两种不同的浏览体验
1、点击一篇文章，进去阅读（用户主动获取信息）
2、界面蹦出一个界面，你的付款已成功（正常信息推送）；正在浏览网页时，突然蹦出一个联系客服的对话框等（不良信息推送）
在系统推送的消息中，有些是有益信息，有些是影响体验的信息，或者换句话说，需要用户去筛选和识别有用的信息。
用户主动获取信息示意图
服务器主动推送信息示意图
在设计过程中，要注意推送信息的形势，不要让用户感觉突兀，或者推送太多不相关的影响使用体验的信息。
在具体工作中，如何去实现服务器推送呢？
信息推送的技术原理参考：http://88250.b3log.org/web-message-push
通过下方4步骤可轻松实现netty-socketio集成到spring中的实现过程（官网：https://socket.io/），
1、在pom.xml文件中添加依赖
<!-- 推送 -->
<dependency>
<groupId>com.corundumstudio.socketio</groupId>
<artifactId>netty-socketio</artifactId>
<version>${netty-socketio.version}</version>
</dependency>
2、socketio服务端程序
package com.macrodata.socketio.service;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;
import com.corundumstudio.socketio.AckRequest;
import com.corundumstudio.socketio.Configuration;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.listener.ConnectListener;
import com.corundumstudio.socketio.listener.DataListener;
import com.corundumstudio.socketio.listener.DisconnectListener;
/**
*
* @author JiaqianLi
*
*/
@Service
public class SocketIoService {
private Logger logger = LoggerFactory.getLogger(this.getClass());
private static SocketIOServer server;
private static Map<String, SocketIOClient> clientsMap = new HashMap<String, SocketIOClient>();
public SocketIoService() {
// 初始化时启动服务
new Thread(new Runnable() {
@Override
public void run() {
try {
startServer();
logger.info("SocketIOServer启动成功！");
} catch (InterruptedException e) {
logger.error("SocketIOServer启动失败！", e);
}
}
}, "SocketIOServer启动线程").start();
}
public void startServer() throws InterruptedException {
Configuration config = new Configuration();
// 服务器主机ip
config.setHostname("localhost");
// 端口
config.setPort(9092);
config.setMaxFramePayloadLength(1024 * 1024);
config.setMaxHttpContentLength(1024 * 1024);
server = new SocketIOServer(config);
// 监听广告推送事件，advert_info为事件名称，自定义
server.addEventListener("advert_info", String.class, new DataListener<String>() {
@Override
public void onData(SocketIOClient client, String data, AckRequest ackRequest)
throws ClassNotFoundException {
// 客户端推送advert_info事件时，onData接受数据，这里是string类型的json数据，还可以为Byte[],object其他类型
String sa = client.getRemoteAddress().toString();
String clientIp = sa.substring(1, sa.indexOf(":"));// 获取客户端连接的ip
// Map params = client.getHandshakeData().getUrlParams();//
// 获取客户端url参数
System.out.println(clientIp + "：客户端：************" + data);
// client.sendEvent("advert_info", data+"你好……");
}
});
// 监听通知事件
server.addEventListener("notice_info", String.class, new DataListener<String>() {
@Override
public void onData(SocketIOClient client, String data, AckRequest ackRequest) {
// 同上
}
});
/**
* 监听其他事件
*/
// 添加客户端连接事件
server.addConnectListener(new ConnectListener() {
@Override
public void onConnect(SocketIOClient client) {
String sa = client.getRemoteAddress().toString();
String clientIp = sa.substring(1, sa.indexOf(":"));// 获取设备ip
System.out.println(clientIp + "-------------------------" + "客户端已连接");
// Map params = client.getHandshakeData().getUrlParams();
String uuid = client.getSessionId().toString();
clientsMap.put(uuid, client);
// 给客户端发送消息
client.sendEvent("advert_info", clientIp + "客户端你好，我是服务端，有什么能帮助你的？");
}
});
// 添加客户端断开连接事件
server.addDisconnectListener(new DisconnectListener() {
@Override
public void onDisconnect(SocketIOClient client) {
String sa = client.getRemoteAddress().toString();
String clientIp = sa.substring(1, sa.indexOf(":"));// 获取设备ip
System.out.println(clientIp + "-------------------------" + "客户端已断开连接");
String uuid = client.getSessionId().toString();
// 移除客户端实例
clientsMap.remove(uuid);
// 给客户端发送消息
client.sendEvent("advert_info", clientIp + "客户端你好，我是服务端，期待下次和你见面");
}
});
server.start();
Thread.sleep(Integer.MAX_VALUE);
server.stop();
}
public void stopServer() {
if (server != null) {
server.stop();
server = null;
}
}
/**
* 给所有连接客户端推送消息
*
* @param eventType
* 推送的事件类型
* @param message
* 推送的内容
*/
public void sendMessageToAllClient(String eventType, String message) {
Collection<SocketIOClient> clients = server.getAllClients();
for (SocketIOClient client : clients) {
client.sendEvent(eventType, message);
}
}
/**
* 给具体的客户端推送消息
*
* @param deviceId
* 设备类型
* @param eventType推送事件类型
* @param message
* 推送的消息内容
*/
public void sendMessageToOneClient(String uuid, String eventType, String message) {
try {
if (uuid != null && !"".equals(uuid)) {
SocketIOClient client = (SocketIOClient) clientsMap.get(uuid);
if (client != null) {
client.sendEvent(eventType, message);
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
public static SocketIOServer getServer() {
return server;
}
}
3、客户端实现，编写socketio_client.js
var SocketioClient = {
createNew:function(host,port){
var client = {};
//服务器域名/IP
client.host = host;
//socketio服务端口号
client.port = port;
client.socket = io('http://'+host+':'+port);
client.socket.on('connect', () => {
console.log(client.socket.id); // 'G5p5...'
});
client.socket.on('connect', () => {
console.log("连接成功");
});
client.socket.on('connect_error', (error) => {
console.error("连接错误");
});
client.socket.on('connect_timeout', (timeout) => {
console.log("连接超时");
});
client.socket.on('error', (error) => {
// ...
});
client.socket.on('disconnect', (reason) => {
console.log("关闭连接");
});
client.socket.on('reconnect', (attemptNumber) => {
console.log("重新连接");
});
client.socket.on('reconnect_error', (error) => {
// ...
});
client.socket.on('reconnect_failed', () => {
// ...
});
client.socket.on('ping', () => {
//console.log("向服务器端发送数据包");
});
client.socket.on('pong', (latency) => {
//console.log("接收服务器数据包");
});
// 向服务端发送消息
client.send = function(event,msg,callback){
if(callback){
client.socket.emit(event, msg,(data) =>callback);
}else{
client.socket.emit(event, msg);
}
}
// 接收服务端消息
client.receive = function(event,callback){
client.socket.on(event,callback);
}
return client;
}
}
4、让网页支持消息推送
<!-- 引入官方的socket.io.js文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<!-- 引入第三步创建的socketio_client.js文件 -->
<script src="/static/js/common/socketio_client.js"></script>
<script type="text/javascript">
//构建客户端实例
var client = SocketioClient.createNew('localhost',9092);
//接收消息处理
client.receive('advert_info',function(data){
console.info(data);
// 在此处更新页面显示（提示效果）
});
//向服务端发送消息
function sendMsg(){
client.send('advert_info', 'jiaqianli.cn@gmail.com');
}
</script>
