成人欧美69口爆一区,一级A片女处破7女视频,收seo量跳转量影视X量@DJYT8,欧美a v在线,亚洲黄片免费观看,夜色帮福利福利,69成人精品国产,91五月丁香啪啪视频

程序員的成長(zhǎng)之路

互聯(lián)網(wǎng)/程序員/技術(shù)/資料共享?

閱讀本文大概需要 4.5?分鐘。

來自：cnblogs.com/jae-tech/p/15409340.html

# 寫在前面

此異常非彼異常，標(biāo)題所說的異常是業(yè)務(wù)上的異常。

最近做了一個(gè)需求，消防的設(shè)備巡檢，如果巡檢發(fā)現(xiàn)異常，通過手機(jī)端提交，后臺(tái)的實(shí)時(shí)監(jiān)控頁(yè)面實(shí)時(shí)獲取到該設(shè)備的信息及位置，然后安排員工去處理。

因?yàn)樾枰?wù)端主動(dòng)向客戶端發(fā)送消息，所以很容易的就想到了用WebSocket來實(shí)現(xiàn)這一功能。

WebSocket就不做介紹了

上鏈接：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

前端略微復(fù)雜，需要在一張位置分布圖上進(jìn)行鼠標(biāo)描點(diǎn)定位各個(gè)設(shè)備和根據(jù)不同屏幕大小渲染，本文不做介紹，只是簡(jiǎn)單地用頁(yè)面樣式進(jìn)行效果呈現(xiàn)。

綠色代表正常，紅色代表異常

預(yù)期效果，未接收到請(qǐng)求前----->id為3的提交了異常，id為3的王五變成了紅色

# 實(shí)現(xiàn)

前端：

直接貼代碼

<html>    <head>        <meta charset="utf-8" />        <title>實(shí)時(shí)監(jiān)控title>    head>    <style>        .item {            display: flex;            border-bottom: 1px solid #000000;            justify-content: space-between;            width: 30%;            line-height: 50px;            height: 50px;        }
        .item span:nth-child(2){            margin-right: 10px;            margin-top: 15px;            width: 20px;            height: 20px;            border-radius: 50%;            background: #55ff00;        }        .nowI{            background: #ff0000 !important;        }style>    <body>        <div id="app">            <div v-for="item in list" class="item">                <span>{{item.id}}.{{item.name}}span>                <span :class='item.state==-1?"nowI":""'>span>            div>        div>    body>    <script src="./js/vue.min.js">script>    <script type="text/javascript">        var vm = new Vue({            el: "#app",            data: {                list: [{                        id: 1,                        name: '張三',                        state: 1                    },                    {                        id: 2,                        name: '李四',                        state: 1                    },                    {                        id: 3,                        name: '王五',                        state: 1                    },                    {                        id: 4,                        name: '韓梅梅',                        state: 1                    },                    {                        id: 5,                        name: '李磊',                        state: 1                    },                ]            }        })
        var webSocket = null;        if ('WebSocket' in window) {            //創(chuàng)建WebSocket對(duì)象            webSocket = new WebSocket("ws://localhost:18801/webSocket/" + getUUID());
            //連接成功            webSocket.onopen = function() {                console.log("已連接");                webSocket.send("消息發(fā)送測(cè)試")            }            //接收到消息            webSocket.onmessage = function(msg) {                //處理消息                var serverMsg = msg.data;                var t_id = parseInt(serverMsg)    //服務(wù)端發(fā)過來的消息，ID，string需轉(zhuǎn)化為int類型才能比較                for (var i = 0; i < vm.list.length; i++) {                    var item = vm.list[i];                    if(item.id == t_id){                        item.state = -1;                        vm.list.splice(i,1,item)                        break;                    }                }            };
            //關(guān)閉事件            webSocket.onclose = function() {                console.log("websocket已關(guān)閉");            };            //發(fā)生了錯(cuò)誤事件            webSocket.onerror = function() {                console.log("websocket發(fā)生了錯(cuò)誤");            }        } else {            alert("很遺憾，您的瀏覽器不支持WebSocket！")        }
        function getUUID() {    //獲取唯一的UUID            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random() * 16 | 0,                    v = c == 'x' ? r : (r & 0x3 | 0x8);                return v.toString(16);            });        }script>html>

后端：

項(xiàng)目結(jié)構(gòu)是這樣子的，后面的代碼關(guān)鍵注釋都有，就不重復(fù)描述了

1、新建SpringBoot工程，選擇web和WebSocket依賴

2、配置application.yml?

#端口server:  port: 18801
#密碼，因?yàn)榻涌诓恍枰獧?quán)限，所以加了個(gè)密碼做校驗(yàn)mySocket:  myPwd: jae_123

3、WebSocketConfig配置類

@Configurationpublic class WebSocketConfig {
    /**     * 注入一個(gè)ServerEndpointExporter,該Bean會(huì)自動(dòng)注冊(cè)使用@ServerEndpoint注解申明的websocket endpoint     */    @Bean    public ServerEndpointExporter serverEndpointExporter(){        return new ServerEndpointExporter();    }}

4、WebSocketServer類，用來進(jìn)行服務(wù)端和客戶端之間的交互

/** * @author jae * @ServerEndpoint("/webSocket/{uid}") 前端通過此URI與后端建立鏈接 */
@ServerEndpoint("/webSocket/{uid}")@Componentpublic class WebSocketServer {
    private static Logger log = LoggerFactory.getLogger(WebSocketServer.class);
    //靜態(tài)變量，用來記錄當(dāng)前在線連接數(shù)。應(yīng)該把它設(shè)計(jì)成線程安全的。    private static final AtomicInteger onlineNum = new AtomicInteger(0);
    //concurrent包的線程安全Set，用來存放每個(gè)客戶端對(duì)應(yīng)的WebSocketServer對(duì)象。    private static CopyOnWriteArraySet sessionPools = new CopyOnWriteArraySet();
    /**     * 有客戶端連接成功     */    @OnOpen    public void onOpen(Session session, @PathParam(value = "uid") String uid){        sessionPools.add(session);        onlineNum.incrementAndGet();        log.info(uid + "加入webSocket！當(dāng)前人數(shù)為" + onlineNum);    }
    /**     * 連接關(guān)閉調(diào)用的方法     */    @OnClose    public void onClose(Session session) {        sessionPools.remove(session);        int cnt = onlineNum.decrementAndGet();        log.info("有連接關(guān)閉，當(dāng)前連接數(shù)為：{}", cnt);    }
    /**     * 發(fā)送消息     */    public void sendMessage(Session session, String message) throws IOException {        if(session != null){            synchronized (session) {                session.getBasicRemote().sendText(message);            }        }    }
    /**     * 群發(fā)消息     */    public void broadCastInfo(String message) throws IOException {        for (Session session : sessionPools) {            if(session.isOpen()){                sendMessage(session, message);            }        }    }
    /**     * 發(fā)生錯(cuò)誤     */    @OnError    public void onError(Session session, Throwable throwable){        log.error("發(fā)生錯(cuò)誤");        throwable.printStackTrace();    }
}

5、WebSocketController類，用于進(jìn)行接口測(cè)試

@RestController@RequestMapping("/open/socket")public class WebSocketController {
    @Value("${mySocket.myPwd}")    public String myPwd;
    @Autowired    private WebSocketServer webSocketServer;
    /**     * 手機(jī)客戶端請(qǐng)求接口     * @param id    發(fā)生異常的設(shè)備ID     * @param pwd   密碼（實(shí)際開發(fā)記得加密）     * @throws IOException     */    @PostMapping(value = "/onReceive")    public void onReceive(String id,String pwd) throws IOException {        if(pwd.equals(myPwd)){  //密碼校驗(yàn)一致（這里舉例，實(shí)際開發(fā)還要有個(gè)密碼加密的校驗(yàn)的），則進(jìn)行群發(fā)            webSocketServer.broadCastInfo(id);        }    }
}

測(cè)試

1、打開前端頁(yè)面，進(jìn)行WebSocket連接

控制臺(tái)輸出，連接成功

2、因?yàn)槭悄M數(shù)據(jù)，所以全部顯示正常，沒有異常提交時(shí)的頁(yè)面呈現(xiàn)

3、接下來，我們用接口測(cè)試工具Postman提交一個(gè)異常

?注意id為3的這個(gè)數(shù)據(jù)的狀態(tài)變化

我們可以看到，id為3的王五狀態(tài)已經(jīng)變成異常的了，實(shí)時(shí)通訊成功。

參考：

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

# 最后

工作中有這方面關(guān)于實(shí)時(shí)監(jiān)控的需求，可以參考一下哦。

不足之處歡迎指出，覺得有用的話就點(diǎn)個(gè)再看吧！

一個(gè)員工的離職成本有多恐怖！

互聯(lián)網(wǎng)初中高級(jí)大廠面試題(9個(gè)G)

內(nèi)容包含Java基礎(chǔ)、JavaWeb、MySQL性能優(yōu)化、JVM、鎖、百萬并發(fā)、消息隊(duì)列、高性能緩存、反射、Spring全家桶原理、微服務(wù)、Zookeeper、數(shù)據(jù)結(jié)構(gòu)、限流熔斷降級(jí)......等技術(shù)棧！

?戳閱讀原文領(lǐng)取！? ? ? ? ? ? ? ??? ??? ? ? ? ? ? ? ? ? ?朕已閱?

終于實(shí)現(xiàn)了 SpringBoot+WebSocket實(shí)時(shí)監(jiān)控異常....