# Lumen-IM
## 1、简介
Lumen-IM 是一个网页版在线即时聊天项目,前端使用 Element-ui + Vue ,后端使用 PHP + Swoole 进行开发。项目后端采用 Hyperf 框架。
- 基于 Swoole WebSocket 服务做消息即时推送
- 支持私聊及群聊
- 支持聊天消息类型有文本、代码块、图片及其它类型文件,并支持文件下载
- 支持聊天消息撤回、删除或批量删除、转发消息(逐条转发、合并转发)及群投票功能
- 支持编写个人笔记、支持笔记分享(好友或群)
## 2、项目DEMO
- 地址: [http://im.gzydong.club](http://im.gzydong.club)
- 账号: 18798272054 或 18798272055
- 密码: admin123
## 3、环境要求
- PHP >= 7.3
- MySQL >= 5.7
- Redis >= 5.0
- Swoole >= 4.5
- OpenSSL
- JSON
- PDO
## 4、相关文档
[Hyperf 框架](https://hyperf.wiki/2.1/#/README)
## 5、项目安装
1. 下载源码包
2. 安装框架依赖包执行 `composer install` 命令 [项目根目录下执行]
2. 拷贝项目根目录下 .env.example 文件为 .env 并正确配置相关参数(mysql、redis)
3. 执行项目安装命令(安装数据库及测试数据) `php bin/hyperf.php system:install`
4. 启动运行项目 `php bin/hyperf.php start`
注 :[项目运行之前请确保 MySQL、Redis 及 Nginx 服务]
## Nginx 相关配置(代理 swoole 服务)
##### 配置 Http 服务
```
upstream hyperf_http {
# Hyperf HTTP Server 的 IP 及 端口
server 127.0.0.1:9503;
}
server {
# 监听端口
listen 80;
# 绑定的域名,填写您的域名
server_name im-serve.xxx.com;
location / {
client_max_body_size 20m;
# 将客户端的 Host 和 IP 信息一并转发到对应节点
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 转发Cookie,设置 SameSite
proxy_cookie_path / "/; secure; HttpOnly; SameSite=strict";
# 执行代理访问真实服务器
proxy_pass http://hyperf_http;
}
}
```
##### 配置 WebSocket 服务
```
# 至少需要一个 Hyperf 节点,多个配置多行
upstream hyperf_websocket {
server 127.0.0.1:9504;
}
server {
listen 80;
server_name im-socket.xxx.com;
location / {
# WebSocket Header
proxy_http_version 1.1;
proxy_set_header Upgrade websocket;
proxy_set_header Connection "Upgrade";
# 将客户端的 Host 和 IP 信息一并转发到对应节点
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
# 客户端与服务端无交互 60s 后自动断开连接,请根据实际业务场景设置
proxy_read_timeout 60s ;
# 执行代理访问真实服务器
proxy_pass http://hyperf_websocket;
}
}
```
##### 配置图片域名
```
server {
listen 80;
server_name im-img.xxx.xxx;
index index.html;
# 默认禁止访问
location / {
deny all;
}
# 只允许 访问 images 文件夹下的文件
location ^~ /media/{
# 设置目录别名(确保是项目上传文件目录)
# 例如 upload_dir = /www/data/lumenim
# 此时应配置 alias /www/data/lumenim/media/
alias /www/data/lumenim/media/;
# 设置缓存时间(3天)
expires 3d;
# 关闭访问日志
access_log off;
}
}
```
### 前端地址
[https://github.com/gzydong/LumenIM](https://github.com/gzydong/LumenIM/tree/php-frontend)
### 注意事项
1. 请确保 PHP 安装 openssl、redis 扩展
2. 请确保 Swoole 扩展开启 openssl 扩展
```
[root@iZuf6cs69fbc86cwpu9iv3Z vhost]# php --ri swoole
swoole
Swoole => enabled
Author => Swoole Team <team@swoole.com>
Version => 4.5.9
...
openssl => OpenSSL 1.0.2k-fips 26 Jan 2017 (请确保此处开启)
```
Lumen IM 是一个网页版在线聊天项目,前端使用 Element-ui + Vue,后端采用了基于 Swoole.zip
需积分: 0 85 浏览量
更新于2024-03-03
收藏 220KB ZIP 举报
**正文**
"Lumen IM"是一个精心构建的网页版在线聊天应用程序,它巧妙地结合了前沿的前端技术和高效的后端框架,旨在提供流畅、实时的聊天体验。该项目的主要特点是其前端采用了流行的UI组件库Element UI,搭配强大的Vue.js框架,而后端则是基于Swoole扩展的Lumen微服务架构。
**前端技术**
1. **Element UI**: 这是基于Vue.js的一个UI组件库,提供了丰富的可重用组件,如按钮、表格、对话框、通知等,使得开发者能够快速构建出美观且响应式的用户界面。Element UI的设计理念强调简洁、易用,使得开发过程更加高效。
2. **Vue.js**: Vue是一个轻量级的JavaScript框架,以其简单的API和渐进式特性而闻名。Vue.js允许开发者通过声明式的数据绑定和组件化来构建复杂的应用。在Lumen IM中,Vue.js负责处理视图层,实现数据驱动的动态交互和页面更新。
3. **Hyperf-chat-main**: 这可能是项目的主目录或核心模块,可能包含了前端Vue应用的源代码,以及与后端通信的API接口定义等。开发者可以通过此目录深入理解项目结构和前端逻辑。
**后端技术**
1. **Lumen**: Lumen是 Laravel 框架的一个分支,专注于构建微服务和API驱动的应用。在Lumen IM中,它作为后端服务器,处理来自前端的HTTP请求,执行业务逻辑,并返回必要的数据。
2. **Swoole**: Swoole是一个C语言编写的高性能的PHP扩展,为PHP提供了异步、非阻塞的网络I/O能力。在Lumen IM中,Swoole被用于提升Lumen的性能,特别是在处理高并发和长连接场景下,如在线聊天的实时消息推送。Swoole可以开启TCP/UDP服务器,支持WebSocket协议,使得Lumen IM能实现低延迟的实时通信。
3. **微服务架构**: 使用Swoole和Lumen的组合,Lumen IM可能采用了微服务架构,将复杂应用拆分成一系列独立的服务,每个服务都可以独立部署、扩展和升级,提高了系统的可扩展性和可靠性。
**知识点总结**
- 前端技术栈:Element UI + Vue.js 的集成应用,实现高效UI设计和数据驱动的交互。
- 后端技术栈:Lumen微服务框架结合Swoole扩展,提升性能,支持实时聊天需求。
- 微服务架构:提高系统的灵活性、可维护性和可扩展性。
- 实时通信:Swoole的WebSocket支持,实现双向实时通信。
- 开发流程:前端与后端的API交互,通过Vue.js的HTTP客户端库如axios进行数据请求。
这些技术的结合,使得Lumen IM成为了一个强大而灵活的在线聊天平台,为用户提供无缝的沟通体验。对于开发者来说,这个项目也是一个深入了解现代Web应用开发,尤其是前后端协作和实时通信机制的绝佳案例。
日刷百题
- 粉丝: 6480
- 资源: 951
最新资源
- LABVIEW程序实例-前面板对象数据接收.zip
- LABVIEW程序实例-前面板对象数据接收.zip
- LABVIEW程序实例-求最大值.zip
- LABVIEW程序实例-求最大值.zip
- LABVIEW程序实例-日历控件.zip
- LABVIEW程序实例-日历控件.zip
- LABVIEW程序实例-强度图.zip
- LABVIEW程序实例-强度图.zip
- LABVIEW程序实例-三维曲线.zip
- LABVIEW程序实例-三维曲线.zip
- LABVIEW程序实例-三维表面.zip
- LABVIEW程序实例-三维表面.zip
- LABVIEW程序实例-三维参数表面.zip
- LABVIEW程序实例-三维参数表面.zip
- LABVIEW程序实例-设置颜色.zip
- LABVIEW程序实例-设置颜色.zip