Skip to content

nikolausliu/chat-app

Repository files navigation

chat-app

使用socket.io搭建一个即使通讯服务的demo。客户端端使用Vite2 + Vue3 + socket.io-client,后端使用express4 + socket.io。该仓库是客户端源码仓库。

目前实现的功能很简单:

  • 所有访问这个项目的用户默认进入同一个房间
  • 所有用户进入房间后,socketId作为他的昵称,同时从项目的头像池里随机取一个头像作为他的头像
  • 用户进入房间和离开房间后向所有用户广播
  • 所有进入房间的用户都可以发送消息,消息会向所有用户广播
  • 目前只能发文字

因为写这个demo的目的就是想看下socket是怎么玩得,所以只实现了最简单的功能,我现在能想到的一些功能比如:

  • 实现用户注册登录
  • 用户搜索
  • 用户有好友列表,并能添加其它用户为好友
  • 可以和好友发起聊天
  • 可以创建群聊和销毁群聊
  • 聊天记录同步

先占坑吧,以后有时间再慢慢实现吧,最近太忙了。

部署

另外值得一提的是部署。客户端和服务端代码都通过github actions完成,可以直接在.github/workflows中查看对应的yml配置文件

客户端是部署在gh-pages分支上,这是github赋予所有仓库的能力,不了解gh-pages的可以自己搜一下了解下是怎么回事。整个部署的流程大概是:

  • 配置pnpm环境(第三方action pnpm/[email protected])
  • 代码检出(第三方action actions/checkout@v2)
  • 安装依赖(pnpm i)
  • 构建代码(pnpm build)
  • 把构建产物部署到gh-pages分支(第三方action peaceiris/actions-gh-pages@v3)

部署完成后就可以通过https://nikolausliu.github.io/chat-app访问了,我把我的域名nikolausliu.top解析到了我的阿里云服务器公网IP,然后在服务器里通过nginx配置了代理,把域名转发到nikolasuliu.top,所以我的这个项目也可以通过https://nikolausliu.top/chat-app来访问了。

服务端是部署在了我的阿里云服务器,部署的大致流程是:

  • 代码检出
  • 设置node版本
  • 我这个express服务不需要构建,所以把需要的源码文件上传到阿里云服务器指定文件夹(第三方action appleboy/scp-action@master)
  • ssh远程连接阿里云服务器,cd进目标目录,安装依赖并重启pm2(第三方action appleboy/ssh-action@master)

About

使用socket.io实现实时聊天,client端

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published