整体架构简单梳理

前端具体的开发我就不说了，我也是第一次接触vue，本来是个纯后端java开发，没人给我写前端，只能自己东拼西凑，界面不好，凑活能用，功能都实现了。

云服务器

服务器这边主要用的腾讯云的服务器，因为刚巧碰到秒杀活动，99元一年所以果断租了，后来发现域名也挺便宜，果断租用一年才十几块，具体配置腾讯云都有，大家可以看官方文档，主要几点：

jdk的安装 ；
nginx的安装以及基础配置，下边会说到；
node环境的安装；
mysql/redis的安装 推荐 mysql安装，redis安装；
域名的dns解析配置，网站备案（官方有教程）腾讯云文档；

nginx的基础配置

user root; 用户记得改一下，默认是nobody
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
…
…
…
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name baidu.com; 自己的域名，举个例子
root /root/weixin/vue/dist; 资源根目录，此处是我的vue项目打包后的dist文件夹
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
index index.html index.htm; 匹配映射规则，/找到首页
}
location /lc/ {
proxy_pass http://172.&.0.&:8132/lc/; 设置对应的路径映射，主要是内外网转换，此处是将域名请求转换为内网ip访问服务端，下同
}
location /socket.io/ {
proxy_pass http://172.&.0.&:5555/socket.io/; 此处是对ws长链接请求的处理
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
}
location /image/avatar/ {
root /root/weixin; 此处是对图片等静态资源做的映射，此处作为静态资源服务器使用
autoindex on;
}

    以上是一些服务相关的关键配置，其他的还有很多配置项，可自行查看了解。

springboot-eureka简单梳理

springboot配置

spring-boot和spring-cloud在依赖方面有很多的版本对应限制，不匹配的话无法启动，推荐大家使用这个依赖管理，具体的版本大家可以自行搜索。

    <dependencies><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><version>Finchley.RELEASE</version><type>pom</type><scope>import</scope></dependency></dependencies>
</dependencyManagement>

eureka服务的简单配置
yml文件

pom文件

有一个安全配置需要注意

聊天功能实现的基础流程

1.用户正常登录之后不会马上建立长链接，因为大部分时间可能不是在真正的聊天，如果只要登录就建立长链接的话比较消耗也比较浪费资源，对服务器压力比较大。

2.当用户点击好友或者群的时候进入聊天室，此时建立长链接，退出聊天室则断开长链接。

3.对于消息提醒机制（包括加好友提醒或者新的消息提醒），我这边采用前端定时轮循的方法，这不是最好的方法，大家可能有更合适的方法。

4.对于聊天过程传输图片我是这样实现的，前端将图片转为base64字符串，通过ws传给后端，后端decode base64同时将其上传文件存储oss/cos/s3（我存在了服务器本地，我的服务器此处充当资源存储服务器，通过nginx实现资源的http式请求，模拟正常的文件链接）等等将图片链接作为聊天记录入库。

ws的实现

ws的实现我采用的socket.io框架 socketio
服务端因为我是java，所以选择了一款netty-socketio的框架，netty的好处相信大家都知道，可以自己查一下 netty-socketio
框架具体内容大家可以去自己了解捉摸，是一次很不错的从0到上线的简单实践，意义非凡。
前端写的太糙了，就不丢人现眼了，但是大概实现了我们所有基本的聊天需求，包括（登录注册，搜索用户，增删好友，单聊群聊，聊天记录，发图片，发音视频文件等，增删群，群拉人踢人等）。

springboot+vue搭建简单的聊天网站，从0到上线（腾讯云）相关推荐

【系统开发】WebSocket + SpringBoot + Vue 搭建简易网页聊天室
文章目录一.数据库搭建二.后端搭建 2.1 引入关键依赖 2.2 WebSocket配置类 2.3 配置跨域 2.4 发送消息的控制类 2.5 R类三.前端搭建 3.1 自定义文件websock ...
前端app调起摄像头只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴有前端开发经验.但是没有使用过Vue的小伙伴有过其他编程经验,对前端开发感兴趣的小伙伴学习本教程之后你将会: 了解 ...
java基于Springboot+vue的宠物销售商城网站 elementui
宠物是人类最好的伙伴.尤其是近些年来,随着人们生活条件的改善,同时生活压力的增加越来越多的人.会选择宠物来相伴.在饲养宠物的同时,也会给这些铲屎官们带来一些困惑.不同类型和不同个体的宠物爱好是不同的, ...
vue+element简单实现商城网站首页，模仿电商商城
1.安装启动vue项目可参考 vue+element简单实现商城网站首页,模仿小米电商商城https://blog.csdn.net/lucky_fang/article/details/121544 ...
SSM SpringBoot vue解三阶魔方教学网站
SSM SpringBoot vue解三阶魔方教学网站 SSM 解三阶魔方教学网站功能介绍首页图片轮播新闻资讯魔方教程魔方资料留言板登录注册个人中心我的收藏后台管理登录注册个 ...
网站设置双CDN-境内腾讯云境外GJcdn，速度又快又抗揍
原文地址:网站设置双CDN-境内腾讯云境外GJcdn,速度快抗揍相关文章数据库缓存工具Redis配置教程,大幅度加速WordPress网站宝塔面板Nginx免费防火墙 5.0,有效抵御CC 最快 ...
毕业设计：基于Springboot + Vue仿网易云音乐网站（一）开源
项目背景最近自学了springboot.vue.redis等技术,为了巩固,决定自己做个小网站玩玩,把学到的东西都使用一下,因为自己比较喜欢听音乐,去年一年网易云就听了1800个小时,然后也喜欢周杰 ...
计算机毕业设计springboot+vue+elementUI留守儿童爱心捐赠网站
项目介绍随着留守儿童爱心管理的不断发展,留守儿童爱心网站在现实生活中的使用和普及,留守儿童爱心管理成为近年内出现的一个热门话题,并且能够成为大众广为认可和接受的行为和选择.设计留守儿童爱心网站的目的 ...
基于springboot+vue的地方美食分享网站
081-springboot基于vue的地方美食分享网站开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7 数据库工具:Na ...

springboot+vue搭建简单的聊天网站，从0到上线（腾讯云）

springboot+vue搭建简单的聊天网站，从0到上线