SpringBoot整合WebSocket

用WebSocket做个聊天的小程序

废话不多说上代码！！！！

 

第一步，建立Springboot项目，目录结构如下（随意哈！）：

第二步，导入JAR包

         //主要JAR包 别的需要啥自己导
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-websocket</artifactId>
            </dependency>

            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.37</version>
            </dependency>

 

第三步，创建bean，用来发送消息 接收消息地等等

public class Message {

    public static final String ENTER = "ENTER";
    public static final String SPEAK = "SPEAK";
    public static final String QUIT = "QUIT";

    private String type;//消息类型

    private String username; //发送人

    private String msg; //发送消息

    private int onlineCount; //在线用户数

    //jsonStr，方法将java对象转换成JSON字符串

    public static String jsonStr(String type, String username, String msg, int onlineTotal) {
        return JSON.toJSONString(new Message(type, username, msg, onlineTotal));
    }

}

第四步，创建config用于扫描和注册所有携带ServerEndPoint注解的实例

第五步，创建WebSocket服务器其实就是在一个类上加俩注解

代码如下：

/**
 * WebSocket 聊天服务端
 *
 * @see ServerEndpoint WebSocket服务端 需指定端点的访问路径
 * @see Session   WebSocket会话对象 通过它给客户端发送消息
 */

@Component
@ServerEndpoint("/chat")
public class WebSocketChatServer {

    /**
     * 全部在线会话  PS: 基于场景考虑 这里使用线程安全的Map存储会话对象。
     */
    private static Map<String, Session> onlineSessions = new ConcurrentHashMap<>();


    /**
     * 当客户端打开连接：1.添加会话对象 2.更新在线人数
     */
    @OnOpen
    public void onOpen(Session session) {
        onlineSessions.put(session.getId(), session);
        sendMessageToAll(Message.jsonStr(Message.ENTER, "", "", onlineSessions.size()));
    }

    /**
     * 当客户端发送消息：1.获取它的用户名和消息 2.发送消息给所有人
     * <p>
     * PS: 这里约定传递的消息为JSON字符串 方便传递更多参数！
     */
    @OnMessage
    public void onMessage(Session session, String jsonStr) {
        Message message = JSON.parseObject(jsonStr, Message.class);
        sendMessageToAll(Message.jsonStr(Message.SPEAK, message.getUsername(), message.getMsg(), onlineSessions.size()));
    }

    /**
     * 当关闭连接：1.移除会话对象 2.更新在线人数
     */
    @OnClose
    public void onClose(Session session) {
        onlineSessions.remove(session.getId());
        sendMessageToAll(Message.jsonStr(Message.SPEAK, "", "", onlineSessions.size()));
    }

    /**
     * 当通信发生异常：打印错误日志
     */
    @OnError
    public void onError(Session session, Throwable error) {
        error.printStackTrace();
    }

    /**
     * 公共方法：发送信息给所有人
     */
    private static void sendMessageToAll(String msg) {
        onlineSessions.forEach((id, session) -> {
            try {
                System.out.println(session+"11111");
                session.getBasicRemote().sendText(msg);
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }

}

第六步，controller

获取本机的websocket服务访问路径
ws://"+InetAddress.getLocalHost().getHostAddress()+":"+request.getServerPort()+"/chat

就是websocket协议，然后本机地址，端口，和访问路径！如：ws://127.0.0.1:8080/chat

 

第七步，前端啦！

前端JS代码如下：

<script>
		   // 创建webSocket 连接
			var webSocket = getWebSocket();
			//点击发送
			function send(){
				//在div中显示自己的消息
				var zj = '<div class="user-group">'+
					'<div class="user-msg">'+
						'<span class="user-reply">'+$("#text").val()+'</span>'+
						'<i class="triangle-user"></i>'+
					'</div><img class="user-img" src="../../images/muwu.jpg" /></div>';
				$("#div_zj").append(zj);
				
				//通过建立的websocket传输数据   JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串发送。
				webSocket.send(JSON.stringify({username:"张三",msg:$("#text").val()}))
				//清空输入框
				$('#text').val("");
			}
			
			//Websocket
			function getWebSocket() {
				//webSocket请求地址
				var webSocket = new WebSocket('ws://169.254.161.110:9005/chat');
				
				//onmessage接收服务端传输的消息
				webSocket.onmessage = function(data) {
					var value = JSON.parse(data.data);
					//数据中等于这个状态的数据是我需要显示的数据
					if(value.type == 'SPEAK'){
						//发送的消息不能为空，否则不现实
						if(value.msg != '' && value.msg != null){
							//在div中显示别人的消息
							var br = '<div class="admin-group">'+
							'<img class="admin-img" src="../ahomepage/img/ys2.jpg" />'+
							'<div class="admin-msg">'+
								'<i class="triangle-admin"></i>'+
								'<span class="admin-reply">'+value.msg+'</span>'+
							'</div></div>';
							
							$("#div_zj").append(br);
						}else{
							
						}
					}
					
				};
				
				//一定要返回webSocket！！！
		        return webSocket;
			}
		</script>

 

第八步，启动项目开始跑啦！