通过springBoot创建简单的聊天室

一，创建一个springBoot的项目，步骤如下
第一步：新建项目


第二步：新建好之后，将默认的application.properties文件的后缀改为.yml。目的是让添加配置信息结构化，美化，简化

二.创建通讯类
第一步：建立WebSocket 注册服务中心

第二步：创建客户端访问地址
package com.study.thymeleaf.config;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArrayList;

/**

• @author SONG
• @date 2019/4/20 21:41
  */
  @Component
  @ServerEndpoint("/websocket") // 客户端访问的url
  public class ChatWebSocket {
  // concurrent包的线程安全 set
  // 用来存放每个客户端对应的chatWebSocket对象
  private static CopyOnWriteArrayList chatWebSockets = new CopyOnWriteArrayList<>();
  // 与某个客户端的连接会话对象.通过session给客户端发送数据
  private Session session;

/**

• 连接建立成功回调方法
• @param session
  */
  @OnOpen
  public void onOpen(Session session) {
  this.session = session;
  chatWebSockets.add(this);
  System.out.println("有新连接加入, 当前连接数为: " + chatWebSockets.size());
  // 发送消息
  try {
  sendMessage(“当前共有 " + chatWebSockets.size() + " 位用户在线”);
  } catch (IOException e) {
  e.printStackTrace();
  }
  }

/**

• 连接关闭回调方法
  */
  @OnClose
  public void onClose() {
  chatWebSockets.remove(this);
  sendInfo("有一个连接关闭! 当前在线人数: " + chatWebSockets.size());
  System.out.println("有一个连接关闭! 当前在线人数: " + chatWebSockets.size());
  }

/**

• 收到当前客户端消息后的回调方法
• @param message
• @param session
  */
  @OnMessage
  public void onMessage(String message, Session session) {
  System.out.println("来自客户端的消息: " + message);
  sendInfo(message);
  }

@OnError
public void onError(Session session, Throwable throwable) {
System.out.println(“发生错误”);
throwable.printStackTrace();
}

/**

• 通过连接会话对象发送数据
• @param message
• @throws IOException
  */
  private void sendMessage(String message) throws IOException {
  this.session.getBasicRemote().sendText(message);
  }

/**

• 群发自定义信息
• @param message
  */
  private void sendInfo(String message) {
  for (ChatWebSocket item : chatWebSockets) {
  try {
  item.sendMessage(message);
  } catch (IOException e) {
  continue;
  }
  }
  }
  }

第三步:页面接受信息

聊天框: 你好啊

发送 关闭

// 判断当前浏览器是否支持 WebSocket
if (‘WebSocket’ in window) {
websocket = new WebSocket(“ws://127.0.0.1:8089/websocket”)

// 连接成功的回调方法
websocket.onopen = function (event) {
  console.log('与服务器连接成功....')
  setMessageInnerHTML("与服务器连接成功.")
}

// 连接关闭的回调方法
websocket.onclose = function () {
  setMessageInnerHTML("已关闭当前连接")
}

// 连接发生错误的回调方法
websocket.onerror = function () {
  setMessageInnerHTML("与服务器连接失败")
}

// 接收到消息的回调方法
websocket.onmessage = function (event) {
  setMessageInnerHTML(event.data)
}

window.onbeforeunload = function () {
  websocket.close()
}

} else {
console.log(“未支持WebSocket”)
}

function setMessageInnerHTML(message) {
$("#message").append("

• " + message + “
• ”)
  }

  /**

  • 发送消息
    */
    function send() {
    websocket.send($("#text").val())
    }

  /**

  • 关闭连接
    */
    function closeWebSocket() {
    websocket.close()
    }
    

  第三步:加载静态资源信息
  

  第四步:访问页面