SpringBoot+WebSocket搭建简单的多人聊天系统

 更新时间:2019年10月10日 14:48:06   作者:糟糕的艺术家  
WebSocket是一种在单个TCP连接上进行全双工通信的协议。这是一种比较官方的说法,简单点来说就是,在一次TCP连接中,通信的双方可以相互通信。这篇文章主要介绍了SpringBoot+WebSocket搭建简单的多人聊天系统,需要的朋友可以参考下

前言

今天闲来无事,就来了解一下WebSocket协议。来简单了解一下吧。

WebSocket是什么

首先了解一下WebSocket是什么?WebSocket是一种在单个TCP连接上进行全双工通信的协议。这是一种比较官方的说法,简单点来说就是,在一次TCP连接中,通信的双方可以相互通信。比如A和B在打电话,A说话的时候,B也可以说话来进行信息的交互,这就叫做全双工通信。对应的是单工通信,和半双工通信,单工通信就是只能由A向B通信,比如电脑和打印机。半双工通信是可以AB可以互相通信,但是同一时间只能进行单向通信,比如对讲机。

WebSocket与http有啥区别

相同点

都建立在TCP之上,通过TCP协议来传输数据。

不同点

HTTP协议为单向协议,即浏览器只能向服务器请求资源,服务器才能将数据传送给浏览器,而服务器不能主动向浏览器传递数据。分为长连接和短连接,短连接是每次http请求时都需要三次握手才能发送自己的请求,每个request对应一个response;长连接是短时间内保持连接,保持TCP不断开,指的是TCP连接。

WebSocket一种双向通信协议,在建立连接后,WebSocket服务器和客户端都能主动的向对方发送或接收数据,就像Socket一样,不同的是WebSocket是一种建立在Web基础上的一种简单模拟Socket的协议;WebSocket需要通过握手连接,类似于TCP它也需要客户端和服务器端进行握手连接,连接成功后才能相互通信。WebSocket在建立握手连接时,数据是通过http协议传输的,“GET/chat HTTP/1.1”,这里面用到的只是http协议一些简单的字段。但是在建立连接之后,真正的数据传输阶段是不需要http协议参与的。

用处

WebSocket解决客户端发起多个http请求到服务器资源浏览器必须要经过长时间的轮询问题。

使用WebSocket搭建一个多人聊天系统

引入WebSocket的jar包

Gradle:

compile group: 'org.springframework.boot', name: 'spring-boot-starter-websocket', version: '2.1.8.RELEASE'

Maven:

<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-websocket</artifactId>
 <version>2.1.8.RELEASE</version>
</dependency>

添加对WebSocket的支持

注入ServerEndpointExporter,这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
 * @author: zp
 * @Date: 2019-09-18 10:03
 * @Description:
 */
@Configuration
public class AppConfiguration {
 @Bean
 public ServerEndpointExporter serverEndpointExporter(){
  return new ServerEndpointExporter();
 }
}

创建WebSocket的实现类

@ServerEndpoint("/webSocket/{page}")中的值就是需要访问的地址,和Controller中的@RequestMapping有点类似。然后实现@OnOpen(打开连接),@OnClose(关闭连接),@onMessage(收到消息),@Error(触发异常)。

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;
/**
 * @author: zp
 * @Date: 2019-09-20 15:12
 * @Description:
 */
@Component
@ServerEndpoint("/webSocket/{page}")
public class WebSocket {
 private Logger log = LoggerFactory.getLogger(this.getClass());
 /**
  * 用来记录房间的人数
  */
 private static AtomicInteger onlinePersons = new AtomicInteger(0);
 /**
  * 用来记录房间及人数
  */
 private static Map<String,Set> roomMap = new ConcurrentHashMap(8);
 @OnOpen
 public void open(@PathParam("page") String page, Session session) throws IOException {
  Set set = roomMap.get(page);
  // 如果是新的房间,则创建一个映射,如果房间已存在,则把用户放进去
  if(set == null){
   set = new CopyOnWriteArraySet();
   set.add(session);
   roomMap.put(page,set);
  }else{
   set.add(session);
  }
  // 房间人数+1
  onlinePersons.incrementAndGet();
  log.info("新用户{}进入聊天,房间人数:{}",session.getId(),onlinePersons);
 }
 @OnClose
 public void close(@PathParam("page") String page, Session session){
  // 如果某个用户离开了,就移除相应的信息
  if(roomMap.containsKey(page)){
   roomMap.get(page).remove(session);
  }
  // 房间人数-1
  onlinePersons.decrementAndGet();
  log.info("用户{}退出聊天,房间人数:{}",session.getId(),onlinePersons);
 }
 @OnMessage
 public void reveiveMessage(@PathParam("page") String page, Session session,String message) throws IOException {
  log.info("接受到用户{}的数据:{}",session.getId(),message);
  // 拼接一下用户信息
  String msg = session.getId()+" : "+ message;
  Set<Session> sessions = roomMap.get(page);
  // 给房间内所有用户推送信息
  for(Session s : sessions){
   s.getBasicRemote().sendText(msg);
  }
 }
 @OnError
 public void error(Throwable throwable){
  try {
   throw throwable;
  } catch (Throwable e) {
   log.error("未知错误");
  }
 }
}

写个超级简单的页面测试一下

前端有点菜,写不出好看的ui,见谅~

<html>
<head>
 <meta charset="UTF-8"></meta>
 <title>springboot项目WebSocket测试demo</title>
</head>
<body>
<h3>springboot项目websocket测试demo</h3>
<h4>测试说明</h4>
<h5>文本框中数据数据,点击‘发送测试',文本框中的数据会发送到后台websocket,后台接受到之后,会再推送数据到前端,展示在下方;点击关闭连接,可以关闭该websocket;可以跟踪代码,了解具体的流程;代码上有详细注解</h5>
<br />
<input id="text" type="text" />
<button onclick="send()">发送测试</button>
<hr />
<button onclick="clos()">关闭连接</button>
<hr />
<div id="message"></div>
<script>
 var websocket = null;
 if('WebSocket' in window){
  websocket = new WebSocket("ws://127.0.0.1:9999/webSocket/1");
 }else{
  alert("您的浏览器不支持websocket");
 }
 websocket.onerror = function(){
  setMessageInHtml("send error!");
 }
 websocket.onopen = function(){
  setMessageInHtml("连接成功!")
  setTimeout(function(){setMessageInHtml("欢迎来到这里!")
 },2000)
 }
 websocket.onmessage = e => setMessageInHtml(e.data)
 websocket.onclose = function(){
  setMessageInHtml("连接断开!")
 }
 window.onbeforeunload = function(){
  clos();
 }
 function setMessageInHtml(message){
  document.getElementById('message').innerHTML += message+"</br>";
 }
 function clos(){
  websocket.close(3000,"强制关闭");
 }
 function send(){
  var msg = document.getElementById('text').value;
  websocket.send(msg);
 }
</script>
</body>
</html>

测试

总结

以上所述是小编给大家介绍的SpringBoot+WebSocket搭建简单的多人聊天系统,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • java连接mysql数据库实现单条插入和批量插入

    java连接mysql数据库实现单条插入和批量插入

    这篇文章主要为大家详细介绍了java连接mysql数据库实现单条插入和批量插入,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • Spring @Lookup深入分析实现原理

    Spring @Lookup深入分析实现原理

    这篇文章主要介绍了Spring @Lookup实现原理,我们知道在spring容器中单独的一个抽象类是不能成为一个bean的,那么有没有办法呢?这个时候我们可以使用Lookup注解
    2023-01-01
  • Java设计模式之模板方法详解

    Java设计模式之模板方法详解

    模板方法的概念:定义了一个操作中的算法的骨架,而将部分步骤的实现在子类中完成。模板方法模式使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤
    2022-07-07
  • Java CAS操作与Unsafe类详解

    Java CAS操作与Unsafe类详解

    这篇文章主要介绍了Java CAS操作与Unsafe类的相关资料,帮助大家更好的理解和学习使用Java,感兴趣的朋友可以了解下
    2021-02-02
  • response.setContentType()参数以及作用详解

    response.setContentType()参数以及作用详解

    这篇文章主要介绍了response.setContentType()参数以及作用详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • TK-MyBatis 分页查询的具体使用

    TK-MyBatis 分页查询的具体使用

    分页查询在很多地方都可以使用到,本文就详细的介绍了一下TK-MyBatis 分页查询的具体使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • Java常用占位符方法简单代码实例

    Java常用占位符方法简单代码实例

    占位符是Java中常用的技术,用于在字符串中插入变量值或动态生成字符串,这篇文章主要给大家介绍了关于Java常用占位符方法的相关资料,文中介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • Spring Boot利用Lombok减少Java中样板代码的方法示例

    Spring Boot利用Lombok减少Java中样板代码的方法示例

    spring Boot是非常高效的开发框架,lombok是一套代码模板解决方案,将极大提升开发的效率,下面这篇文章主要给大家介绍了关于Spring Boot利用Lombok减少Java中样板代码的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • Java实现的最大匹配分词算法详解

    Java实现的最大匹配分词算法详解

    这篇文章主要介绍了Java实现的最大匹配分词算法,简单说明了最大匹配分词算法的原理并结合具体实例形式最大匹配分词算法的实现方法与相关注意事项,需要的朋友可以参考下
    2017-09-09
  • springboot整合vue项目(小试牛刀)

    springboot整合vue项目(小试牛刀)

    这篇文章主要介绍了springboot整合vue项目(小试牛刀),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论