Springboot+websocketでチャットルームの小さなプロジェクトを簡単に実現(ユーザー登録情報を保存)

websocketはhttpの補完であり、リアルタイム通信を実現するために、握手1回で長い接続を維持することができ、煩雑なリクエストヘッダがブロードバンドを浪費することを避けることができる.Websocketはチャットルームのプロジェクトを非常に簡単に実現することができます.
以下、Springboot+websocketでチャットルームの小さなプロジェクトを簡単に実現します.
(1)pom.xml 

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.1.1.RELEASE
         
    
    com.microservice
    websocket
    0.0.1-SNAPSHOT
    websocket
    Demo project for Spring Boot

    
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-freemarker
        
        
            org.springframework.boot
            spring-boot-starter-websocket
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
        

        
            org.springframework.boot
            spring-boot-devtools
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

(2)構成クラスWebSocketConfig

package com.microservice.websocket.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @Description:     WebSocketConfig   ，    ServerEndpointExporter，
 *        bean        @ServerEndpoint     Websocket endpoint
 */
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

(3)websocketビジネスクラス

package com.microservice.websocket.socket;

import com.microservice.websocket.entity.UserInfo;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 *  * @Description: websocket      
 *  *   springboot       @Component   ，               websocket ，
 *  *   springboot      spring   。
 *       @Component        ， springboot      websocket       bean，
 *              set    。
*/
@ServerEndpoint(value = "/websocket/{nickName}")
@Component
public class MyWebSocket {
    //            MyWebSocket  。
    private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet();
    private static Map connectmap = new HashMap<>();// session  key，      
    //           ，              
    private Session session;
    /**
     *            
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("nickName") String nickName) {
        this.session = session;
        UserInfo userInfo = new UserInfo(session.getId(),nickName);
        connectmap.put(session,userInfo);
        webSocketSet.add(this);     //  set 
        System.out.println(nickName+"    ！       " + webSocketSet.size());
        //    ，     
        broadcast(nickName+"    ！-->       ："+webSocketSet.size());
    }
    /**
     *          
     */
    @OnClose
    public void onClose() {
        String nickName=connectmap.get(session).getNickName();
        connectmap.remove(session);
        webSocketSet.remove(this);  // set   
        System.out.println(nickName+"    ！       " + webSocketSet.size());
        //    ，     
        broadcast(nickName+"   ，       ："+webSocketSet.size());
    }
    /**
     *              
     *
     * @param message           
     * */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("        :" + message);
        //    
        String nickName=connectmap.get(session).getNickName();
        broadcast(nickName+"  ："+message);
    }
    /**
     *        
     *
     */
    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("    ");
        error.printStackTrace();
    }
    /**
     *        
     * */
    public  void broadcast(String message){
        for (MyWebSocket item : webSocketSet) {
            //        ：http://blog.csdn.net/who_is_xiaoming/article/details/53287691
            //this.session.getBasicRemote().sendText(message);
            item.session.getAsyncRemote().sendText(message);//      .
        }
    }
}

(3)ユーザエンティティクラスUserInfo

package com.microservice.websocket.entity;

/**
 * @program: websocket->UserInfo
 * @description:     
 * @author: ChenZhihao
 * @create: 2019-12-26 16:04
 **/
public class UserInfo {
    private String id;
    private String nickName;
    private String password;

    public UserInfo() {
    }

    public UserInfo(String id, String nickName) {
        this.id = id;
        this.nickName = nickName;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getNickName() {
        return nickName;
    }

    public void setNickName(String nickName) {
        this.nickName = nickName;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

(4)前後が分離されていない場合、つまり前後が同じ項目に配置されている場合は、ページのパスを構成する必要があります.前後端分離であれば、このステップは省略します.

package com.microservice.websocket.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("web")
public class WebController {

    @RequestMapping("index")
    public String index(){
        return "index";
    }
}

(5)はい、バックエンドのコードが書き終わりました.これでページとjsを書き始めます.
ページindex

    

    
    


      WebSocket
        
       ：
    

    

      ：
        
    

(6)ページのjs:index.js

var websocket = null;
function connectWebSocket(){
    //           WebSocket
    //           WebSocket
    if ('WebSocket'in window) {
        var nickName=document.getElementById('nickName').value;
        console.log("ws://localhost:8080/websocket/"+nickName)
        websocket = new WebSocket("ws://localhost:8080/websocket/"+nickName);
    } else {
        alert('        websocket');
    }

    //           
    websocket.onerror = function() {
        setMessageInnerHTML("error");
    };

    //          
    websocket.onmessage = function(event) {
        setMessageInnerHTML(event.data);
    }

    //         
    websocket.onclose = function() {
        setMessageInnerHTML("Loc MSG:    ");
    }

    //        ，      ，     websocket  ，             ，server     。
    window.onbeforeunload = function() {
        websocket.close();
    }
}

//         
function setMessageInnerHTML(innerHTML) {
    document.getElementById('message').innerHTML += innerHTML + '
';
}

//    
function closeWebSocket() {
    websocket.close();
}

//    
function send() {
    var message = document.getElementById('text').value;
    websocket.send(message);
}

(7)CSS : index.css

#message{
    margin-top:40px;
    border:1px solid gray;
    padding:20px;
}

(8)はい、 き わりました. からテストを めます.
1.まずWebページを きます.http://localhost:8080/web/index
ユーザー 、ポイント を し、メッセージを します. ( のインタフェース):

2.もう1つのページを き、ユーザー の を し、 し、メッセージを します. ( のインタフェース):

3.この 、 が たインタフェースは のように:

4. がページを じたとき、 が たインタフェースは のようだ.