Use Springboot e WebScoket para recriar um miniaplicativo de bate-papo semelhante ao WeChat (com código-fonte)

Um miniaplicativo de bate-papo online baseado em Springboot e WebScoket

 

instrução do projeto

• Este projeto é uma pequena demonstração para chat, desenvolvida por springboot + websocket + vue.
• Uma das interfaces é a interface adicionar amigo. Adicionar um amigo determinará se ele já é um amigo.
• Ao bater papo: A envia uma mensagem para B. Se a janela de bate-papo de B não for A, B lembrará A de enviar uma mensagem.
• A caixa de entrada do conteúdo do bate-papo usa o editor de rich text do layui e, atualmente, não suporta o retorno de carro para enviar o conteúdo.
• O bate-papo pode enviar fotos, e as fotos são armazenadas no diretório D: / chat / por padrão.
• Clicar em uma imagem no conteúdo do bate-papo irá abrir uma prévia, que irá exibir todas as imagens nesta mensagem.
• Ao enviar uma voz, a voz é enviada ao usuário na janela de bate-papo atual por padrão, portanto, ao gravar a voz, certifique-se de que haja usuários selecionados na janela de bate-papo atual.
• Saiba que a conta do usuário pode adicionar amigos, atualmente, se a conta existir, você pode adicioná-la diretamente com sucesso

As regras antigas, vamos examinar a estrutura do diretório do projeto primeiro:

 

Um, primeiro apresente o arquivo pom

Basta colocar um pequeno código aqui (o código é muito longo)

<dependency>            <groupId>commons-io</groupId>            <artifactId>commons-io</artifactId>            <version>2.4</version>        </dependency>        <dependency>            <groupId>org.projectlombok</groupId>            <artifactId>lombok</artifactId>        </dependency>        <dependency>            <groupId>net.sf.json-lib</groupId>            <artifactId>json-lib</artifactId>            <version>2.4</version>            <classifier>jdk15</classifier>        </dependency>        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-thymeleaf</artifactId>            <version>2.2.4.RELEASE</version>        </dependency>        <dependency>            <groupId>com.alibaba</groupId>            <artifactId>fastjson</artifactId>            <version>1.2.60</version>        </dependency>        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-test</artifactId>            <scope>test</scope>        </dependency>

Em segundo lugar, crie o arquivo de configuração yml correspondente

spring:
  profiles:
    active: prod

spring:
  datasource:    username: root    password: root    url: jdbc:mysql://localhost:3306/chat?useUnicode=true&characterEncoding=utf8&autoReconnect=true&useSSL=false&serverTimezone=UTC
    driver-class-name: com.mysql.jdbc.Driver    #指定数据源    type: com.alibaba.druid.pool.DruidDataSource
    # 数据源其他配置    initialSize: 5
    minIdle: 5
    maxActive: 20
    maxWait: 60000
    timeBetweenEvictionRunsMillis: 60000
    minEvictableIdleTimeMillis: 300000
    validationQuery: SELECT 1
    testWhileIdle: true
    testOnBorrow: false
    testOnReturn: false
    poolPreparedStatements: true
    #   配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙
    filters: stat,log4j    maxPoolPreparedStatementPerConnectionSize: 20
    useGlobalDataSourceStat: true
    connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500
  thymeleaf:    suffix: .html    prefix:      classpath: /templates/    cache: false
  jackson: #返回的日期字段的格式    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8
    serialization:      write-dates-as-timestamps: false # true 使用时间戳显示时间
  http:    multipart:      max-file-size: 1000Mb
      max-request-size: 1000Mb
#配置文件式开发mybatis:  #全局配置文件的位置  config-location: classpath:mybatis/mybatis-config.xml
  #所有sql映射配置文件的位置  mapper-locations: classpath:mybatis/mapper/**/*.xmlserver:  session:    timeout: 7200

Três, crie uma classe de entidade

Não direi mais aqui, existem  Login, Userinfo, ChatMsg, ChatFriends

 

Quarto, crie o mapeador correspondente (ou seja, camada dao) e o arquivo de mapeamento do mapeador correspondente

(Aqui está apenas um, não direi mais)

public interface ChatFriendsMapper {
    //查询所有的好友
    List<ChatFriends> LookUserAllFriends(String userid);
    //插入好友
    void InsertUserFriend(ChatFriends chatFriends);
    //判断是否加好友
    Integer JustTwoUserIsFriend(ChatFriends chatFriends);
    //查询用户的信息
    Userinfo LkUserinfoByUserid(String userid);
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.chat.mapper.ChatFriendsMapper">
    <select id="LookUserAllFriends" resultType="com.chat.bean.ChatFriends" parameterType="java.lang.String">
      select userid,nickname,uimg from userinfo where userid in (select a.fuserid from chat_friends a where a.userid=#{userid})    </select>
    <insert id="InsertUserFriend" parameterType="com.chat.bean.ChatFriends">
        insert into chat_friends (userid, fuserid) value (#{userid},#{fuserid})    </insert>
    <select id="JustTwoUserIsFriend" parameterType="com.chat.bean.ChatFriends" resultType="java.lang.Integer">
        select id from chat_friends where userid=#{userid} and fuserid=#{fuserid}    </select>
    <select id="LkUserinfoByUserid" parameterType="java.lang.String" resultType="com.chat.bean.Userinfo">
        select * from userinfo where userid=#{userid}    </select>
</mapper>

Quinto, crie a classe de negócios correspondente (ou seja, serviço)

(A mesma camada de negócios também é apontada aqui)

@Service
public class ChatFriendsService {
    @Autowired
    ChatFriendsMapper chatFriendsMapper;    public List<ChatFriends> LookUserAllFriends(String userid){
        return chatFriendsMapper.LookUserAllFriends(userid);
    }    public void InsertUserFriend(ChatFriends chatFriends){
        chatFriendsMapper.InsertUserFriend(chatFriends);    }    public Integer JustTwoUserIsFriend(ChatFriends chatFriends){
        return chatFriendsMapper.JustTwoUserIsFriend(chatFriends);
    }    public Userinfo LkUserinfoByUserid(String userid){
        return chatFriendsMapper.LkUserinfoByUserid(userid);
    }}

Seis, crie o controlador correspondente

Deixe-me falar sobre a interface do projeto

1. / chat / upimg 
   chat interface de upload de imagens
2. / chat / lkuser 
   Esta interface é usada para adicionar amigos: consultar o usuário, se o usuário existir, retornar informações do usuário, se não, retornar não existe
3. / chat / adduser / 
   Esta interface é a interface para adicionar amigos, irá determinar se o amigo adicionado é você mesmo, se o amigo adicionado já existe, ele retornará diretamente
4. / chat / ct 
   pula para a interface de chat
5. / chat / lkfriends 
   consulta os amigos do usuário
6. / chat / lkuschatmsg / 
   Esta interface é uma interface para consultar informações de bate-papo entre dois usuários, passando a ID de usuário do usuário e questionando o usuário conectado no momento e o histórico de bate-papo do usuário.
7. / chat / audio 
   Esta interface é usada pelo Ajax para fazer upload de dados de áudio gravados pela interface web js

(Escreva também um)

@Controller
public class LoginCtrl {
    @Autowired
    LoginService loginService;    @GetMapping("/")
    public String tologin(){
        return "user/login";
    }    /**
     * 登陆
     * */
    @PostMapping("/justlogin")
    @ResponseBody
    public R login(@RequestBody Login login, HttpSession session){
        login.setPassword(Md5Util.StringInMd5(login.getPassword()));        String userid = loginService.justLogin(login);        if(userid==null){
            return R.error().message("账号或者密码错误");
        }        session.setAttribute("userid",userid);
        return R.ok().message("登录成功");
    }}

Sete, crie a classe de ferramenta correspondente e a classe de exceção personalizada

1. Ferramentas de filtragem de expressão

public class EmojiFilter {
    private static boolean isEmojiCharacter(char codePoint) {
        return (codePoint == 0x0) || (codePoint == 0x9) || (codePoint == 0xA)
                || (codePoint == 0xD)
                || ((codePoint >= 0x20) && (codePoint <= 0xD7FF))
                || ((codePoint >= 0xE000) && (codePoint <= 0xFFFD))
                || ((codePoint >= 0x10000) && (codePoint <= 0x10FFFF));
    }    @Test
    public void testA(){
        String s = EmojiFilter.filterEmoji("您好:smile:，你好啊");
        System.out.println(s);    }

1. Classe de criptografia de dados Md5

static String[] chars = {"0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"};
    /**
     * 将普通字符串用md5加密，并转化为16进制字符串
     * @param str
     * @return
     */
    public static String StringInMd5(String str) {        // 消息签名（摘要）
        MessageDigest md5 = null;        try {            // 参数代表的是算法名称
            md5 = MessageDigest.getInstance("md5");
            byte[] result = md5.digest(str.getBytes());            StringBuilder sb = new StringBuilder(32);
            // 将结果转为16进制字符  0~9 A~F
            for (int i = 0; i < result.length; i++) {
                // 一个字节对应两个字符
                byte x = result[i];                // 取得高位
                int h = 0x0f & (x >>> 4);
                // 取得低位
                int l = 0x0f & x;
                sb.append(chars[h]).append(chars[l]);            }            return sb.toString();
        } catch (NoSuchAlgorithmException e) {            throw new RuntimeException(e);        }    }

1. Teste de criptografia de dados

public class TestUtil {
    @Test
    public void testA(){
        String s = Md5Util.StringInMd5("123456");
        System.out.println(s);
    }}

8. Importe o arquivo de recurso estático correspondente (isso deve ser feito no início)

 

Nove, personalize algumas configurações e injete-as no contêiner

1. Fonte de dados Druida

@Configuration
public class DruidConfig {    @ConfigurationProperties(prefix = "spring.datasource")
    @Bean    public DataSource druid(){        return new DruidDataSource();
    }    //配置Druid的监控    //1.配置要给管理后台的Servlet
    @Bean    public ServletRegistrationBean servletRegistrationBean(){        ServletRegistrationBean bean=new ServletRegistrationBean(new StatViewServlet(),"/druid/*");
        Map<String,String> initParams=new HashMap<>();        initParams.put("loginUsername","admin");
        initParams.put("loginPassword","admin233215");
        initParams.put("allow","");//默认允许ip访问
        initParams.put("deny","");
        bean.setInitParameters(initParams);        return bean;
    }    //2.配置一个监控的filter
    @Bean    public FilterRegistrationBean webStarFilter(){        FilterRegistrationBean bean=new FilterRegistrationBean();        bean.setFilter(new WebStatFilter());        Map<String,String> initParams=new HashMap<>();        initParams.put("exclusions","*.js,*.css,/druid/*");
        bean.setInitParameters(initParams);        bean.setUrlPatterns(Arrays.asList("/*"));
        return bean;
    }}

1. Recursos estáticos e interceptores

@Configuration
public class MyConfig extends WebMvcConfigurerAdapter {
    //配置一个静态文件的路径 否则css和js无法使用，虽然默认的静态资源是放在static下，但是没有配置里面的文件夹
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }    @Bean    public WebMvcConfigurerAdapter WebMvcConfigurerAdapter() {        WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {            @Override            public void addResourceHandlers(ResourceHandlerRegistry registry) {                //registry.addResourceHandler("/pic/**").addResourceLocations("file:D:/chat/");
                registry.addResourceHandler("/pic/**").addResourceLocations("file:D:/idea_project/SpringBoot/Project/Complete&&Finish/chat/chatmsg/");
                super.addResourceHandlers(registry);
            }        };        return adapter;
    }    @Override    public void addInterceptors(InterceptorRegistry registry) {        //注册TestInterceptor拦截器
        InterceptorRegistration registration = registry.addInterceptor(new AdminInterceptor());        registration.addPathPatterns("/chat/*");
    }}

1. Acordo de comunicação WebSocketConfigScokt

@Configuration
@EnableWebSocket
public class WebSocketConfig {
     @Bean
    public ServerEndpointExporter serverEndpointExporter() {        return new ServerEndpointExporter();
    }}

10. Teste

Estes são dois usuários diferentes

 

 

Claro, você também pode dar voz e adicionar amigos

Por hoje é isso! Se gostou, por favor preste atenção, obrigado!