服务器消息推送:netty-socketio

消息实时推送可使得用户及时获取相关的信息，增加工作的处理效率，获得更好的交互体验。消息推送的应用场景举例
---新内容提示——新文章，新视频，新留言
---任务列表提示——下午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>