官网介绍

🌐 http://www.websocket.org
The HTML5 WebSockets specification defines an API that enables web pages to use the WebSockets protocol for two-way communication with a remote host. It introduces the WebSocket interface and defines a full-duplex communication channel that operates through a single socket over the Web. HTML5 WebSockets provide an enormous reduction in unnecessary network traffic and latency compared to the unscalable polling and long-polling solutions that were used to simulate a full-duplex connection by maintaining two connections.
HTML5 WebSockets account for network hazards such as proxies and firewalls, making streaming possible over any connection, and with the ability to support upstream and downstream communications over a single connection, HTML5 WebSockets-based applications place less burden on servers, allowing existing machines to support more concurrent connections. The following figure shows a basic WebSocket-based architecture in which browsers use a WebSocket connection for full-duplex, direct communication with remote hosts.

💡 维基百科
WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为RFC 6455，并由RFC 7936补充规范。WebScoket API也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebScoket API中，浏览器和服务器只需要完成一次握手，两者之前就直接创建持久性的连接，并进行双向数据传输。

项目准备

使用maven构建项目：

  1. <properties>
  2.   <maven.compiler.source>1.8</maven.compiler.source>
  3.   <maven.compiler.target>1.8</maven.compiler.target>
  4.   <spring.boot.version>2.2.2.RELEASE</spring.boot.version>
  5. </properties>
  7. <dependencies>
  8.   <dependency>
  9.     <groupId>org.springframework.boot</groupId>
  10.     <artifactId>spring-boot-starter-websocket</artifactId>
  11.     <version>${spring.boot.version}</version>
  12.   </dependency>
  13.   <dependency>
  14.     <groupId>org.springframework.boot</groupId>
  15.     <artifactId>spring-boot-starter-thymeleaf</artifactId>
  16.     <version>${spring.boot.version}</version>
  17.   </dependency>
  18. </dependencies>
  20. <build>
  21.   <plugins>
  22.     <plugin>
  23.       <groupId>org.springframework.boot</groupId>
  24.       <artifactId>spring-boot-maven-plugin</artifactId>
  25.     </plugin>
  26.   </plugins>
  27. </build>

application.properties如下：

  1. # Server
  2. server.port=3333
  4. # Thymeleaf
  5. spring.thymeleaf.prefix=classpath:/view/

后端编码

CustomEndpointConfigure

  1. import org.springframework.beans.BeansException;
  2. import org.springframework.beans.factory.BeanFactory;
  3. import org.springframework.context.ApplicationContext;
  4. import org.springframework.context.ApplicationContextAware;
  6. import javax.websocket.server.ServerEndpointConfig;
  8. /**
  9.  * @author KHighness
  10.  * @since 2021-04-05
  11.  */
  13. public class CustomEndpointConfigure extends ServerEndpointConfig.Configurator implements ApplicationContextAware {
  15.     private static volatile BeanFactory context;
  17.     @Override
  18.     public <T> T getEndpointInstance(Class<T> clazz) throws InstantiationException {
  19.         return context.getBean(clazz);
  20.     }
  22.     @Override
  23.     public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
  24.         CustomEndpointConfigure.context = applicationContext;
  25.     }
  27. }

WebSocketConfigure

  1. import org.springframework.context.annotation.Bean;
  2. import org.springframework.context.annotation.Configuration;
  3. import org.springframework.web.socket.server.standard.ServerEndpointExporter;
  5. /**
  6.  * @author KHighness
  7.  * @since 2021-04-05
  8.  */
  10. @Configuration
  11. public class WebSocketConfigure {
  13.     /**
  14.      * 扫描并注册所有携带@ServerEndpoint注解的实例
  15.      */
  16.     @Bean
  17.     public ServerEndpointExporter serverEndpointExporter() {
  18.         return new ServerEndpointExporter();
  19.     }
  21.     @Bean
  22.     public CustomEndpointConfigure customEndpointConfigure() {
  23.         return new CustomEndpointConfigure();
  24.     }
  25. }

CommonController

  2. import org.springframework.web.bind.annotation.PathVariable;
  3. import org.springframework.web.bind.annotation.RequestMapping;
  4. import org.springframework.web.bind.annotation.RestController;
  5. import org.springframework.web.servlet.ModelAndView;
  6. import top.parak.websocket.WebSocketServer;
  8. import javax.websocket.Session;
  9. import java.util.ArrayList;
  10. import java.util.List;
  11. import java.util.Map;
  13. /**
  14.  * @author KHighness
  15.  * @since 2021-04-05
  16.  */
  18. @RestController
  19. @RequestMapping("/websocket")
  20. public class CommonController {
  22.     /**
  23.      * 登录
  24.      */
  25.     @RequestMapping("/login/{username}")
  26.     public ModelAndView login(@PathVariable("username") String username) {
  27.         return new ModelAndView("socketChart.html", "username", username);
  28.     }
  30.     /**
  31.      * 登出
  32.      */
  33.     @RequestMapping("/logout/{username}")
  34.     public String logout(@PathVariable("username") String username) {
  35.         return username + "退出成功";
  36.     }
  38.     /**
  39.      * 获取在线用户
  40.      */
  41.     @RequestMapping("/getOnlineList")
  42.     public List<String> getOnlineList(String username) {
  43.         List<String> list = new ArrayList<>();
  44.         for (Map.Entry<String, Session> entry : WebSocketServer.sessionStorage.entrySet()) {
  45.             if (!entry.getKey().equals(username)) {
  46.                 list.add(entry.getKey());
  47.             }
  48.         }
  49.         return list;
  50.     }
  52. }

WebSockerServer

  1. import com.fasterxml.jackson.core.JsonProcessingException;
  2. import com.fasterxml.jackson.databind.ObjectMapper;
  3. import org.slf4j.Logger;
  4. import org.slf4j.LoggerFactory;
  5. import org.springframework.web.bind.annotation.RequestMapping;
  6. import org.springframework.web.bind.annotation.RestController;
  7. import top.parak.config.CustomEndpointConfigure;
  9. import javax.annotation.Resource;
  10. import javax.websocket.*;
  11. import javax.websocket.server.PathParam;
  12. import javax.websocket.server.ServerEndpoint;
  13. import java.io.IOException;
  14. import java.util.HashMap;
  15. import java.util.Map;
  16. import java.util.concurrent.ConcurrentHashMap;
  17. import java.util.concurrent.atomic.AtomicLong;
  19. /**
  20.  * @author KHighness
  21.  * @since 2021-04-05
  22.  */
  24. @RestController
  25. @RequestMapping("/websocket")
  26. @ServerEndpoint(value = "/websocket/{username}", configurator = CustomEndpointConfigure.class)
  27. public class WebSocketServer {
  29.     private Logger logger = LoggerFactory.getLogger(WebSocketServer.class);
  31.     @Resource
  32.     private ObjectMapper objectMapper;
  34.     /**
  35.      * 在线人数
  36.      */
  37.     public static AtomicLong onlineCount = new AtomicLong();
  39.     /**
  40.      * 在线用户
  41.      * key:username，value:session
  42.      */
  43.     public static Map<String, Session> sessionStorage = new ConcurrentHashMap<>();
  45.     /**
  46.      * 连接建立成功调用
  47.      */
  48.     @OnOpen
  49.     public void onOpen(Session session, @PathParam("username") String username) {
  50.         // 用户上线
  51.         sessionStorage.put(username, session);
  52.         // 数量增加
  53.         WebSocketServer.onlineCount.incrementAndGet();
  54.         // 群发消息
  55.         try {
  56.             // 构建消息
  57.             Map<String, Object> map = new HashMap<>();
  58.             map.put("type", "onlineCount");
  59.             map.put("onlineCount", onlineCount.get());
  60.             map.put("username", username);
  61.             sendMessage(session, objectMapper.writeValueAsString(map));
  62.         } catch (JsonProcessingException e) {
  63.             logger.error(e.getMessage());
  64.         }
  65.         logger.info("用户{}上线，SESSION_ID = {}", username, session.getId());
  66.     }
  68.     /**
  69.      * 连接关闭调用
  70.      */
  71.     @OnClose
  72.     public void onClose(Session session) {
  73.         String username = "";
  74.         for (Map.Entry<String, Session> entry : sessionStorage.entrySet()) {
  75.             if (entry.getValue() == session) {
  76.                 username = entry.getKey();
  77.                 // 移除用户
  78.                 sessionStorage.remove(username);
  79.                 // 数量减少
  80.                 onlineCount.decrementAndGet();
  81.                 break;
  82.             }
  83.         }
  84.         logger.info("用户{}下线，SESSION_ID = {}", username, session.getId());
  85.     }
  87.     /**
  88.      * 收到客户端消息调用
  89.      */
  90.     @OnMessage
  91.     public void onMessage(Session session, String message) {
  92.         // json -> hashmap
  93.         try {
  94.             HashMap hashMap = objectMapper.readValue(message, HashMap.class);
  95.             Map srcUser = (Map) hashMap.get("srcUser");
  96.             Map tarUser = (Map) hashMap.get("tarUser");
  98.             // 如果点击自己，则为群聊
  99.             if (srcUser.get("username").equals(tarUser.get("username"))) {
  100.                 groupChat(session, hashMap);
  101.             } else { // 私聊
  102.                 privateChat(session, tarUser, hashMap);
  103.             }
  104.         } catch (JsonProcessingException e) {
  105.             logger.error(e.getMessage());
  106.         }
  107.     }
  109.     /**
  110.      * 发生错误调用
  111.      */
  112.     @OnError
  113.     public void onError(Session session, Throwable error) {
  114.         logger.error(error.getMessage());
  115.     }
  117.     /**
  118.      * 群发
  119.      */
  120.     private void sendMessage(Session session, String message) {
  121.         for (Map.Entry<String, Session> entry : sessionStorage.entrySet()) {
  122.             try {
  123.                 if (entry.getValue() != session) {
  124.                     entry.getValue().getBasicRemote().sendText(message);
  125.                 }
  126.             } catch (IOException e) {
  127.                 logger.error(e.getMessage());
  128.             }
  129.         }
  130.     }
  132.     /**
  133.      * 私聊
  134.      */
  135.     private void privateChat(Session session, Map target, HashMap message) {
  136.         Session targetSession = sessionStorage.get(target.get("username"));
  137.         if (targetSession == null) { // 目标用户不在线，向自己发送<对方不在线>
  138.             try {
  139.                 // 构建消息
  140.                 Map<String, Object> map = new HashMap<>();
  141.                 map.put("type", "0");
  142.                 map.put("message", "对方不在线");
  143.                 session.getBasicRemote().sendText(objectMapper.writeValueAsString(map));
  144.             } catch (IOException e) {
  145.                 logger.error(e.getMessage());
  146.             }
  147.         }  else {
  148.             try {
  149.                 message.put("type", "1");
  150.                 targetSession.getBasicRemote().sendText(new ObjectMapper().writeValueAsString(message));
  151.             } catch (IOException e) {
  152.                 logger.error(e.getMessage());
  153.             }
  154.         }
  155.     }
  157.     /**
  158.      * 群聊
  159.      */
  160.     private void groupChat(Session session, HashMap hashMap) {
  161.         for (Map.Entry<String, Session> entry : sessionStorage.entrySet()) {
  162.             if (entry.getValue() != session) {
  163.                 try {
  164.                     hashMap.put("type", "2");
  165.                     entry.getValue().getBasicRemote().sendText(new ObjectMapper().writeValueAsString(hashMap));
  166.                 } catch (IOException e) {
  167.                     logger.error(e.getMessage());
  168.                 }
  169.             }
  170.         }
  171.     }
  173. }

KHighnessApplication

  1. import org.springframework.boot.SpringApplication;
  2. import org.springframework.boot.autoconfigure.SpringBootApplication;
  3. import org.springframework.scheduling.annotation.EnableAsync;
  5. /**
  6.  * @author KHighness
  7.  * @since 2021-04-05
  8.  */
  10. @EnableAsync
  11. @SpringBootApplication
  12. public class KHighnessApplication {
  14.     public static void main(String[] args) {
  15.         SpringApplication.run(KHighnessApplication.class, args);
  16.     }
  18. }

前端编码

socketChart.css

  1. body{
  2.     background-color: #efebdc;
  3. }
  4. #hz-main{
  5.     width: 700px;
  6.     height: 500px;
  7.     background-color: red;
  8.     margin: 0 auto;
  9. }
  11. #hz-message{
  12.     width: 500px;
  13.     height: 500px;
  14.     float: left;
  15.     background-color: #B5B5B5;
  16. }
  18. #hz-message-body{
  19.     width: 460px;
  20.     height: 340px;
  21.     background-color: #E0C4DA;
  22.     padding: 10px 20px;
  23.     overflow:auto;
  24. }
  26. #hz-message-input{
  27.     width: 500px;
  28.     height: 99px;
  29.     background-color: white;
  30.     overflow:auto;
  31. }
  33. #hz-group{
  34.     width: 200px;
  35.     height: 500px;
  36.     background-color: rosybrown;
  37.     float: right;
  38. }
  40. .hz-message-list{
  41.     min-height: 30px;
  42.     margin: 10px 0;
  43. }
  44. .hz-message-list-text{
  45.     padding: 7px 13px;
  46.     border-radius: 15px;
  47.     width: auto;
  48.     max-width: 85%;
  49.     display: inline-block;
  50. }
  52. .hz-message-list-username{
  53.     margin: 0;
  54. }
  56. .hz-group-body{
  57.     overflow:auto;
  58. }
  60. .hz-group-list{
  61.     padding: 10px;
  62. }
  64. .left{
  65.     float: left;
  66.     color: #595a5a;
  67.     background-color: #ebebeb;
  68. }
  69. .right{
  70.     float: right;
  71.     color: #f7f8f8;
  72.     background-color: #919292;
  73. }
  74. .hz-badge{
  75.     width: 20px;
  76.     height: 20px;
  77.     background-color: #FF5722;
  78.     border-radius: 50%;
  79.     float: right;
  80.     color: white;
  81.     text-align: center;
  82.     line-height: 20px;
  83.     font-weight: bold;
  84.     opacity: 0;
  85. }

socketChart.js

  1. //消息对象数组
  2. var msgObjArr = new Array();
  4. var websocket = null;
  6. //判断当前浏览器是否支持WebSocket， springboot是项目名
  7. if ('WebSocket' in window) {
  8.     websocket = new WebSocket("ws://localhost:3333/websocket/"+username);
  9. } else {
  10.     console.error("不支持WebSocket");
  11. }
  13. //连接发生错误的回调方法
  14. websocket.onerror = function (e) {
  15.     console.error("WebSocket连接发生错误");
  16. };
  18. //连接成功建立的回调方法
  19. websocket.onopen = function () {
  20.     //获取所有在线用户
  21.     $.ajax({
  22.         type: 'post',
  23.         url: ctx + "/websocket/getOnlineList",
  24.         contentType: 'application/json;charset=utf-8',
  25.         dataType: 'json',
  26.         data: {username:username},
  27.         success: function (data) {
  28.             if (data.length) {
  29.                 //列表
  30.                 for (var i = 0; i < data.length; i++) {
  31.                     var userName = data[i];
  32.                     $("#hz-group-body").append("<div class=\"hz-group-list\"><span class='hz-group-list-username'>" + userName + "</span><span id=\"" + userName + "-status\">[在线]</span><div id=\"hz-badge-" + userName + "\" class='hz-badge'>0</div></div>");
  33.                 }
  35.                 //在线人数
  36.                 $("#onlineCount").text(data.length);
  37.             }
  38.         },
  39.         error: function (xhr, status, error) {
  40.             console.log("ajax错误！");
  41.         }
  42.     });
  43. }
  45. //接收到消息的回调方法
  46. websocket.onmessage = function (event) {
  47.     var messageJson = eval("(" + event.data + ")");
  49.     //普通消息(私聊)
  50.     if (messageJson.type == "1") {
  51.         //来源用户
  52.         var srcUser = messageJson.srcUser;
  53.         //目标用户
  54.         var tarUser = messageJson.tarUser;
  55.         //消息
  56.         var message = messageJson.message;
  58.         //最加聊天数据
  59.         setMessageInnerHTML(srcUser.username,srcUser.username, message);
  60.     }
  62.     //普通消息(群聊)
  63.     if (messageJson.type == "2"){
  64.         //来源用户
  65.         var srcUser = messageJson.srcUser;
  66.         //目标用户
  67.         var tarUser = messageJson.tarUser;
  68.         //消息
  69.         var message = messageJson.message;
  71.         //最加聊天数据
  72.         setMessageInnerHTML(username,tarUser.username, message);
  73.     }
  75.     //对方不在线
  76.     if (messageJson.type == "0"){
  77.         //消息
  78.         var message = messageJson.message;
  80.         $("#hz-message-body").append(
  81.             "<div class=\"hz-message-list\" style='text-align: center;'>" +
  82.             "<div class=\"hz-message-list-text\">" +
  83.             "<span>" + message + "</span>" +
  84.             "</div>" +
  85.             "</div>");
  86.     }
  88.     //在线人数
  89.     if (messageJson.type == "onlineCount") {
  90.         //取出username
  91.         var onlineCount = messageJson.onlineCount;
  92.         var userName = messageJson.username;
  93.         var oldOnlineCount = $("#onlineCount").text();
  95.         //新旧在线人数对比
  96.         if (oldOnlineCount < onlineCount) {
  97.             if($("#" + userName + "-status").length > 0){
  98.                 $("#" + userName + "-status").text("[在线]");
  99.             }else{
  100.                 $("#hz-group-body").append("<div class=\"hz-group-list\"><span class='hz-group-list-username'>" + userName + "</span><span id=\"" + userName + "-status\">[在线]</span><div id=\"hz-badge-" + userName + "\" class='hz-badge'>0</div></div>");
  101.             }
  102.         } else {
  103.             //有人下线
  104.             $("#" + userName + "-status").text("[离线]");
  105.         }
  106.         $("#onlineCount").text(onlineCount);
  107.     }
  109. }
  111. //连接关闭的回调方法
  112. websocket.onclose = function () {
  113.     //alert("WebSocket连接关闭");
  114. }
  116. //将消息显示在对应聊天窗口    对于接收消息来说这里的toUserName就是来源用户，对于发送来说则相反
  117. function setMessageInnerHTML(srcUserName,msgUserName, message) {
  118.     //判断
  119.     var childrens = $("#hz-group-body").children(".hz-group-list");
  120.     var isExist = false;
  121.     for (var i = 0; i < childrens.length; i++) {
  122.         var text = $(childrens[i]).find(".hz-group-list-username").text();
  123.         if (text == srcUserName) {
  124.             isExist = true;
  125.             break;
  126.         }
  127.     }
  128.     if (!isExist) {
  129.         //追加聊天对象
  130.         msgObjArr.push({
  131.             toUserName: srcUserName,
  132.             message: [{username: msgUserName, message: message, date: NowTime()}]//封装数据
  133.         });
  134.         $("#hz-group-body").append("<div class=\"hz-group-list\"><span class='hz-group-list-username'>" + srcUserName + "</span><span id=\"" + srcUserName + "-status\">[在线]</span><div id=\"hz-badge-" + srcUserName + "\" class='hz-badge'>0</div></div>");
  135.     } else {
  136.         //取出对象
  137.         var isExist = false;
  138.         for (var i = 0; i < msgObjArr.length; i++) {
  139.             var obj = msgObjArr[i];
  140.             if (obj.toUserName == srcUserName) {
  141.                 //保存最新数据
  142.                 obj.message.push({username: msgUserName, message: message, date: NowTime()});
  143.                 isExist = true;
  144.                 break;
  145.             }
  146.         }
  147.         if (!isExist) {
  148.             //追加聊天对象
  149.             msgObjArr.push({
  150.                 toUserName: srcUserName,
  151.                 message: [{username: msgUserName, message: message, date: NowTime()}]//封装数据
  152.             });
  153.         }
  154.     }
  156.     // 对于接收消息来说这里的toUserName就是来源用户，对于发送来说则相反
  157.     var username = $("#toUserName").text();
  159.     //刚好打开的是对应的聊天页面
  160.     if (srcUserName == username) {
  161.         $("#hz-message-body").append(
  162.             "<div class=\"hz-message-list\">" +
  163.             "<p class='hz-message-list-username'>"+msgUserName+"：</p>" +
  164.             "<div class=\"hz-message-list-text left\">" +
  165.             "<span>" + message + "</span>" +
  166.             "</div>" +
  167.             "<div style=\" clear: both; \"></div>" +
  168.             "</div>");
  169.     } else {
  170.         //小圆点++
  171.         var conut = $("#hz-badge-" + srcUserName).text();
  172.         $("#hz-badge-" + srcUserName).text(parseInt(conut) + 1);
  173.         $("#hz-badge-" + srcUserName).css("opacity", "1");
  174.     }
  175. }
  177. //发送消息
  178. function send() {
  179.     //消息
  180.     var message = $("#hz-message-input").html();
  181.     //目标用户名
  182.     var tarUserName = $("#toUserName").text();
  183.     //登录用户名
  184.     var srcUserName = $("#talks").text();
  185.     websocket.send(JSON.stringify({
  186.         "type": "1",
  187.         "tarUser": {"username": tarUserName},
  188.         "srcUser": {"username": srcUserName},
  189.         "message": message
  190.     }));
  191.     $("#hz-message-body").append(
  192.         "<div class=\"hz-message-list\">" +
  193.         "<div class=\"hz-message-list-text right\">" +
  194.         "<span>" + message + "</span>" +
  195.         "</div>" +
  196.         "</div>");
  197.     $("#hz-message-input").html("");
  198.     //取出对象
  199.     if (msgObjArr.length > 0) {
  200.         var isExist = false;
  201.         for (var i = 0; i < msgObjArr.length; i++) {
  202.             var obj = msgObjArr[i];
  203.             if (obj.toUserName == tarUserName) {
  204.                 //保存最新数据
  205.                 obj.message.push({username: srcUserName, message: message, date: NowTime()});
  206.                 isExist = true;
  207.                 break;
  208.             }
  209.         }
  210.         if (!isExist) {
  211.             //追加聊天对象
  212.             msgObjArr.push({
  213.                 toUserName: tarUserName,
  214.                 message: [{username: srcUserName, message: message, date: NowTime()}]//封装数据[{username:huanzi,message:"你好，我是欢子！",date:2018-04-29 22:48:00}]
  215.             });
  216.         }
  217.     } else {
  218.         //追加聊天对象
  219.         msgObjArr.push({
  220.             toUserName: tarUserName,
  221.             message: [{username: srcUserName, message: message, date: NowTime()}]//封装数据[{username:huanzi,message:"你好，我是欢子！",date:2018-04-29 22:48:00}]
  222.         });
  223.     }
  224. }
  226. //监听点击用户
  227. $("body").on("click", ".hz-group-list", function () {
  228.     $(".hz-group-list").css("background-color", "");
  229.     $(this).css("background-color", "whitesmoke");
  230.     $("#toUserName").text($(this).find(".hz-group-list-username").text());
  232.     //清空旧数据，从对象中取出并追加
  233.     $("#hz-message-body").empty();
  234.     $("#hz-badge-" + $("#toUserName").text()).text("0");
  235.     $("#hz-badge-" + $("#toUserName").text()).css("opacity", "0");
  236.     if (msgObjArr.length > 0) {
  237.         for (var i = 0; i < msgObjArr.length; i++) {
  238.             var obj = msgObjArr[i];
  239.             if (obj.toUserName == $("#toUserName").text()) {
  240.                 //追加数据
  241.                 var messageArr = obj.message;
  242.                 if (messageArr.length > 0) {
  243.                     for (var j = 0; j < messageArr.length; j++) {
  244.                         var msgObj = messageArr[j];
  245.                         var leftOrRight = "right";
  246.                         var message = msgObj.message;
  247.                         var msgUserName = msgObj.username;
  248.                         var toUserName = $("#toUserName").text();
  250.                         //当聊天窗口与msgUserName的人相同，文字在左边（对方/其他人），否则在右边（自己）
  251.                         if (msgUserName == toUserName) {
  252.                             leftOrRight = "left";
  253.                         }
  255.                         //但是如果点击的是自己，群聊的逻辑就不太一样了
  256.                         if (username == toUserName && msgUserName != toUserName) {
  257.                             leftOrRight = "left";
  258.                         }
  260.                         if (username == toUserName && msgUserName == toUserName) {
  261.                             leftOrRight = "right";
  262.                         }
  264.                         var magUserName = leftOrRight == "left" ? "<p class='hz-message-list-username'>"+msgUserName+"：</p>" : "";
  266.                         $("#hz-message-body").append(
  267.                             "<div class=\"hz-message-list\">" +
  268.                             magUserName+
  269.                             "<div class=\"hz-message-list-text " + leftOrRight + "\">" +
  270.                             "<span>" + message + "</span>" +
  271.                             "</div>" +
  272.                             "<div style=\" clear: both; \"></div>" +
  273.                             "</div>");
  274.                     }
  275.                 }
  276.                 break;
  277.             }
  278.         }
  279.     }
  280. });
  282. //获取当前时间
  283. function NowTime() {
  284.     var time = new Date();
  285.     var year = time.getFullYear();//获取年
  286.     var month = time.getMonth() + 1;//或者月
  287.     var day = time.getDate();//或者天
  288.     var hour = time.getHours();//获取小时
  289.     var minu = time.getMinutes();//获取分钟
  290.     var second = time.getSeconds();//或者秒
  291.     var data = year + "-";
  292.     if (month < 10) {
  293.         data += "0";
  294.     }
  295.     data += month + "-";
  296.     if (day < 10) {
  297.         data += "0"
  298.     }
  299.     data += day + " ";
  300.     if (hour < 10) {
  301.         data += "0"
  302.     }
  303.     data += hour + ":";
  304.     if (minu < 10) {
  305.         data += "0"
  306.     }
  307.     data += minu + ":";
  308.     if (second < 10) {
  309.         data += "0"
  310.     }
  311.     data += second;
  312.     return data;
  313. }

socketChart.html

  1. <!DOCTYPE>
  2. <!--解决idea thymeleaf 表达式模板报红波浪线-->
  3. <!--suppress ALL -->
  4. <html xmlns:th="http://www.thymeleaf.org">
  5. <head>
  6.     <title>聊天页面</title>
  7.     <!-- jquery在线版本 -->
  8.     <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  9.     <!--引入样式-->
  10.     <link th:href="@{/css/socketChart.css}" rel="stylesheet" type="text/css"/>
  11. </head>
  12. <body>
  13. <div id="hz-main">
  14.     <div id="hz-message">
  15.         <!-- 头部 -->
  16.         正在与<span id="toUserName"></span>聊天
  17.         <hr style="margin: 0px;"/>
  18.         <!-- 主体 -->
  19.         <div id="hz-message-body">
  20.         </div>
  21.         <!-- 功能条 -->
  22.         <div id="">
  23.             <button>表情</button>
  24.             <button>图片</button>
  25.             <button id="videoBut">视频</button>
  26.             <button onclick="send()" style="float: right;">发送</button>
  27.         </div>
  28.         <!-- 输入框 -->
  29.         <div contenteditable="true" id="hz-message-input">
  31.         </div>
  32.     </div>
  33.     <div id="hz-group">
  34.         登录用户：<span id="talks" th:text="${username}">请登录</span>
  35.         <br/>
  36.         在线人数:<span id="onlineCount">0</span>
  37.         <!-- 主体 -->
  38.         <div id="hz-group-body">
  40.         </div>
  41.     </div>
  42. </div>
  43. </body>
  44. <script type="text/javascript" th:inline="javascript">
  45.     //项目路径
  46.     ctx = [[${#request.getContextPath()}]];
  48.     //登录名
  49.     var username = /*[[${username}]]*/'';
  50. </script>
  51. <script th:src="@{/js/socketChart.js}"></script>
  52. </html>

实现效果

私聊
image.png

群聊
image.png