Git Product home page Git Product logo

xechat's Introduction

基于SpringBoot+STOMP协议实现的web聊天室

环境

  • JDK1.8
  • Maven
  • IDEA
  • Lombok Plugin

部署

Linux & Windows

部署前需先安装配置好 JDK8Maven3 等环境。

创建目录并授权

Linux 系统一般需执行此步骤。
Windows 系统默认创建的目录在项目所处的盘符根目录中,需修改 application.properties 里的目录映射配置 file.directoryMapping=所在盘符:\\xechat\\

# 存放日志的目录
sudo mkdir /var/log/xechat
# 资源映射的目录
sudo mkdir /xechat
# 授权
sudo chmod 777 /var/log/xechat
sudo chmod 777 /xechat

修改应用地址

此配置会影响到聊天图片和聊天记录等文件的访问,本地部署默认即可,线上服务器部署请修改为服务器公网IP或访问域名。

application.properties 配置文件里将 app.url 的值修改即可

#项目地址
app.url=http://localhost:${server.port}

修改百度地图API

不改也行。。。

项目中的定位功能使用的是百度地图的API

需将 ak 的值替换成自己的

编译运行

finalName: maven打包的文件名,在pom.xml文件中由<build>标签内的<finalName>指定

env: 项目运行环境,测试环境test 生产环境prod

mvn clean install -Dmaven.test.skip=true
java -jar ${finalName}.jar --spring.profiles.active=${env}

功能

https://xeblog.cn/articles/13

登入

登入成功后会将用户信息缓存到cookie中

登入界面

选择头像输入昵称后点击登入按钮

系统广播上线消息

发送消息

发送文本消息

发送图片消息

再次登入两个用户

左侧按钮为显示在线用户列表,右侧按钮为退出聊天室

@好友可进行私聊

小毅这个用户收不到胖虎和小丸子的私聊信息

敏感词检测

使用DFA算法检测文本是否包含敏感词(DFA:Deterministic Finite Automaton 确定性有限自动机)

敏感词列表

敏感词的配置是在 resources 目录下的 sensitive-word.txt 文件中,敏感词一行一个

发送一个包含敏感词的文本信息(此处输入的敏感词为嘻嘻和哈哈)

成功被系统河蟹😏 河蟹后的处理是随机返回一个社会主义核心价值观。

富强、**、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善

过滤日志

注销

点击右侧按钮退出聊天室,系统广播离线消息,在线用户列表和在线人数自动更新

点击注销按钮可清除当前的登入信息,不注销则可继续以当前的信息登入

不注销直接登入

消息撤消

双击自己发送的消息弹出撤消提示,确定后即可撤消这条消息(只可撤消3分钟内的消息)

消息已经撤消,系统广播撤消消息

聊天记录

聊天记录访问地址 http://ip:端口/record.html

进入聊天记录页面需要输入访问密码 默认的访问密码为 xechat

密码加密方式

先将密码经过 BASE64 加密后再进行 MD5 的32位小写加密

加密流程

密码 xechat 经过 BASE64 加密后变为 eGVjaGF0 ,再进行 MD5 32位小写加密后变为 c85715fec7827f3b388af185b8e7db77

修改密码

application.properties 配置文件里将 chatrecord.password 的值替换即可

#聊天记录页面访问密码(密码先经过base64加密后再进行32位md5加密)
chatrecord.password=c85715fec7827f3b388af185b8e7db77

输入密码点击确定

密码输入正确后显示聊天记录文件列表,按照 yyyyMMdd 的方式每天自动生成一个 .md 格式的文件

点击列表中的文件可以查看当天的聊天记录

v1.2更新

接入图灵机器人

https://xeblog.cn/articles/14

图灵机器人官网 http://www.turingapi.com
API文档 https://www.kancloud.cn/turing/www-tuling123-com/718227

xechat_v1.2.png

配置机器人

修改图灵ApiKey

turing_apikey.png

application.properties 配置文件里修改 turing.apiKey 的值

#图灵apikey
turing.apiKey=xxx

修改机器人信息

修改 cn.xeblog.xechat.constant.RobotConstant 类中对应常量

package cn.xeblog.xechat.constant;

/**
 * 机器人相关常量
 *
 * @author yanpanyi
 * @date 2019/4/10
 */
public interface RobotConstant {
    /**
     * 存储的key
     */
    String key = "robot";
    /**
     * 触发机器人聊天的消息前缀
     */
    String prefix = "#";
    /**
     * 机器人名称
     */
    String name = "小小毅";
    /**
     * 机器人头像
     */
    String avatar = "./images/avatar/robot.jpeg";
    /**
     * 机器人地理位置
     */
    String address = "火星";
}

修改机器人欢迎信息

修改 cn.xeblog.xechat.constant.MessageConstant 类中对应常量

package cn.xeblog.xechat.constant;

/**
 * 消息模板
 *
 * @author anlingyi
 * @date 2019/5/7
 */
public interface MessageConstant {
    /**
     * 进入聊天室广播消息
     */
    String ONLINE_MESSAGE = "%s进入了聊天室";
    /**
     * 离开聊天室广播消息
     */
    String OFFLINE_MESSAGE = "%s离开了聊天室";
    /**
     * 机器人欢迎消息
     */
    String ROBOT_WELCOME_MESSAGE = "@%s 欢迎来到聊天室!消息内容以'#'开头的我就能收到哦(PS:双击我的头像与我聊天)," +
            "随时来撩我呀!";
}

实际效果

xechat_v1.2_1.png

xechat_v1.2_2.png

xechat_v1.2_3.png

xechat_v1.2_4.png

xechat_v1.2_5.png

靓仔语塞.gif

新消息通知

https://xeblog.cn/articles/22

通过勾选新消息通知、消息提示音等设置项开启相应功能。

xechat_v1.2_6.png

通知效果

xechat_v1.2_7.png

xechat's People

Contributors

anlingyi avatar yanpanyi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

xechat's Issues

关于建立连接的疑问

image
请问新建连接的时候,这个username和avatar字段前端我没找到在哪里有传啊?
还有就是连接建立成功的时候返回的user-name字段名又是从哪里来的?期待回复

订阅一对一消息通道的疑问

我测试了一下前端订阅是可以不用加uid的, 比如这样 stompClient.subscribe('/user/chat', function (data) {xxx}), 然后你写的是这样的 stompClient.subscribe('/user/' + uid + '/chat', function (data) {xxx}), 虽然两者都可以实现需求, 但是后者的原理我不太清楚, 方便解释一下吗.

(ps: 我参考的相关文章: https://juejin.cn/post/6844903661231947784 )

请问心跳是如何处理的?

我看到在JS里面设置了

stompClient.heartbeat.outgoing = 30000;
stompClient.heartbeat.incoming = 0;

那在心跳超时或者出现啥网络问题的时候,是怎么检测到心跳异常呢? 是会直接调用啥方法吗?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.