總結之WebSocket（一）——日常應用

基於springboot2.+的webSocket應用

springboot內容本章不詳細描述
maven依賴websocket

<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

API描述

後端WebSocket基礎方法

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * @author Maniy.top
 * @date 2018/4/8 22:50
 * @name liuzonghua
 */
@ServerEndpoint("/webSocket")
public class WebSocket {
    private Session session;
    public static String okMessage="";
    private static CopyOnWriteArraySet<WebSocket> webSocketSet =new CopyOnWriteArraySet<>();

    @OnOpen
    public void onOpen(Session session){
        this.session =session;
        webSocketSet.add(this);
        log.info("[websocket消息] 有新的連接,總數:{}",webSocketSet.size());
    }
    @OnClose
    public void onClose(){
        webSocketSet.remove(this);
        log.info("[websocket消息] 連接斷開,總數:{}",webSocketSet.size());
    }
//    @OnMessage
//    public void onMessage(String message){
//        log.info("[websocket消息] 收到客戶端發來的消息:{}",message);
//    }

    @OnMessage
    public void onMessage(String message){
         this.okMessage=System.currentTimeMillis()+"|"+message;

        System.out.println(this.okMessage);
        log.info("[websocket消息] 收到客戶端發來的消息:{}",message);


    }

    public void sendMessage(String message){
        for (WebSocket webSocket:webSocketSet){
            log.info("[websocket] 廣播消息,message={}",message);
            try {


            webSocket.session.getBasicRemote().sendText(message);
            }catch (Exception e){
                e.printStackTrace();
            }

        }
    }

    public String getOkMessage() {
        return okMessage;
    }

    public void setOkMessage(String okMessage) {
        this.okMessage = okMessage;
    }
}

使用

@Autowired
private WebSocket webSocket;

//發送websocket消息
webSocket.sendMessage(“categorySave”);

WebSocket前端編碼

 <script>
        var websocket =null;
        if('WebSocket' in window){
            websocket =new WebSocket('ws://47.106.163.172:8080/recruit/webSocket')
        }else {
            alert("該瀏覽器不支持webSocket!")
        }
        websocket.onopen =function (event) {
            console.log('建立連接')

        }
        websocket.onclose=function (event) {
            console.log('連接關閉')

        }
        websocket.onmessage = function (event) {
            console.log('收到消息:'+event.data)


        }
        document.getElementById("sendChat").onclick= function () {
             var txt=document.getElementById("chatContent").value;
             document.getElementById("chatContent").value="";
             websocket.send(txt);
           
        }
        websocket.onerror =function(){
            alert('webSocket通信發生錯誤!')
        }
        window.onbeforeunload =function () {
            websocket.close();
        }

    </script>