使用spring boot建立web socket demo

1.创建一个maven项目，结构如下：

 2.开始粘贴代码了，首先pom.xml文件

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>cn.mr.li</groupId>
  <artifactId>test-spring-boot-websocket</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <parent>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-parent</artifactId>
          <version>1.5.8.RELEASE</version>
  </parent>
  <dependencies>
          <dependency>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-starter-websocket</artifactId>
          </dependency>
          <dependency>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-starter-thymeleaf</artifactId>
          </dependency>
  </dependencies>
  
</project>

3.启动类  WebSocketApplication.java

package cn.mr.li.websocket;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class WebSocketApplication {

    public static void main(String[] args) {
        SpringApplication.run(WebSocketApplication.class, args);
    }
}

4.配置类 WebSocketConfig.java

package cn.mr.li.websocket.config;

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

/**
 * 注册bean对象
 * @author YanLong.li
 * @data 2020-10-21 15:37:23
 *
 */
@Configuration
public class WebSocketConfig {

    @Bean  
    public ServerEndpointExporter serverEndpointExporter() {  
        return new ServerEndpointExporter();  
    }  
}

5.  MyWebSocket  服务器逻辑代码

package cn.mr.li.websocket.service.impl;

import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

import org.springframework.stereotype.Component;

/**
   *   服务端websocket的具体实现
 *    
 * @author YanLong.li
 * @data 2020-10-21 15:39:35
 *
 */
@ServerEndpoint(value = "/websocket")  
@Component 
public class MyWebSocket {

     //用来存放每个客户端对应的MyWebSocket对象。  
    private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();  
   
    //与某个客户端的连接会话，需要通过它来给客户端发送数据  
    private Session session;  
   
    /** 
             * 连接建立成功调用的方法 
     */  
    @OnOpen  
    public void onOpen(Session session) {  
        this.session = session;  
        webSocketSet.add(this);     //加入set中  
        System.out.println("有新连接加入！当前在线人数为" + webSocketSet.size());  
        this.session.getAsyncRemote().sendText("恭喜您成功连接上WebSocket-->当前在线人数为："+webSocketSet.size());  
    }  
   
    /** 
     * 连接关闭调用的方法 
     */  
    @OnClose  
    public void onClose() {  
        webSocketSet.remove(this);  //从set中删除  
        System.out.println("有一连接关闭！当前在线人数为" + webSocketSet.size());  
    }  
   
    /** 
             * 收到客户端消息后调用的方法 
     * 
     * @param message 客户端发送过来的消息*/  
    @OnMessage  
    public void onMessage(String message, Session session) {  
        System.out.println("来自客户端的消息:" + message);  
   
        //群发消息  
        broadcast(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);//异步发送消息.  
        }  
    }  
}

6.IndexController.java

package cn.mr.li.websocket.web;

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

@Controller
public class IndexController {

     /**
      * 在不指定端口的情況下默認：http://127.0.0.1:8080/
      * @return
      */
     @RequestMapping("/")  
     public String index(){  
            return "index";  
     }  
}

7.访问页面代码 index.xml

<!DOCTYPE HTML>  
<html>  
<head>  
<title>My WebSocket</title>  
<style>  
   #message{  
          margin-top:40px;  
          border:1px solid gray;  
          padding:20px;  
       }  
</style>  
</head>  
<body>  
    <button onclick="conectWebSocket()">连接WebSocket</button>  
    <button onclick="closeWebSocket()">断开连接</button>  
    <hr />  
    <br />  
            消息：<input id="text" type="text" />  
    <button onclick="send()">发送消息</button>  
    <div id="message"></div>  
</body>  
<script type="text/javascript">  
    var websocket = null;  
    function conectWebSocket(){  
        //判断当前浏览器是否支持WebSocket  
        if ('WebSocket'in window) {  
               websocket = new WebSocket("ws://localhost:8080/websocket");  
        } else {  
               alert('Not support websocket')  
        }  
        //连接发生错误的回调方法  
        websocket.onerror = function() {  
               setMessageInnerHTML("error");  
        };  
        //连接成功建立的回调方法  
        websocket.onopen = function(event) {  
               setMessageInnerHTML("Loc MSG: 成功建立连接");  
        }  
        //接收到消息的回调方法  
        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 + '<br/>';  
    }  
    //关闭连接  
    function closeWebSocket() {  
        websocket.close();  
    }  
    //发送消息  
    function send() {  
        var message = document.getElementById('text').value;  
        websocket.send(message);  
    }  
</script>  
</html>

默认访问路径：http://127.0.0.1:8080/

正常访问后浏览器上的效果：

 后台效果：

 如果因为环境的乱七八糟原因，就多查多搜，多看，如果还搞不定那就先学学怎么做前期的工作，例如安装.搭建环境，之后再次尝试。