服務器消息推送: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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容