冰河技术
导读
♻学习路线
  • 面试必问系列

    • 面试必问
  • 架构与模式

    • Java极简设计模式
    • 实战高并发设计模式
  • Java核心技术

    • Java8新特性
    • IOC核心技术
    • JVM调优技术
  • 容器化核心技术

    • Dockek核心技术
  • 分布式存储

    • Mycat核心技术
  • 数据库核心技术

    • MySQL基础篇
  • 服务器核心技术

    • Nginx核心技术
  • 渗透核心技术

    • 渗透实战技术
  • 底层技术
  • 源码分析
  • 基础案例
  • 实战案例
  • 面试
  • 系统架构
  • Spring6核心技术
  • 分布式事务

    • 分布式事务系列视频
  • SpringBoot
  • SpringCloudAlibaba
  • 🔥AI大模型项目

    • 一站式AI智能平台
    • AI智能客服系统
    • AI智能问答系统
    • 实战AI大模型
  • 中间件项目

    • 手写高性能Redis组件
    • 手写高性能脱敏组件
    • 手写线程池项目
    • 手写高性能SQL引擎
    • 手写高性能Polaris网关
    • 手写高性能RPC项目
  • 高并发项目

    • 分布式IM即时通讯系统(新)
    • 分布式Seckill秒杀系统
    • 实战高并发设计模式
  • 微服务项目

    • 简易电商脚手架项目
  • 手撕源码

    • 手撕Spring6源码
🌍知识星球
  • 总览

    • 《书籍汇总》
  • 出版图书

    • 《深入理解高并发编程:核心原理与案例实战》
    • 《深入理解高并发编程:JDK核心技术》
    • 《深入高平行開發:深度原理&專案實戰》
    • 《深入理解分布式事务:原理与实战》
    • 《MySQL技术大全:开发、优化与运维实战》
    • 《海量数据处理与大数据技术实战》
  • 电子书籍

    • 《实战高并发设计模式》
    • 《深入理解高并发编程(第2版)》
    • 《深入理解高并发编程(第1版)》
    • 《从零开始手写RPC框架(基础篇)》
    • 《SpringCloud Alibaba实战》
    • 《冰河的渗透实战笔记》
    • 《MySQL核心知识手册》
    • 《Spring IOC核心技术》
  • 关于自己
  • 关于学习
  • 关于职场
B站
Github
导读
♻学习路线
  • 面试必问系列

    • 面试必问
  • 架构与模式

    • Java极简设计模式
    • 实战高并发设计模式
  • Java核心技术

    • Java8新特性
    • IOC核心技术
    • JVM调优技术
  • 容器化核心技术

    • Dockek核心技术
  • 分布式存储

    • Mycat核心技术
  • 数据库核心技术

    • MySQL基础篇
  • 服务器核心技术

    • Nginx核心技术
  • 渗透核心技术

    • 渗透实战技术
  • 底层技术
  • 源码分析
  • 基础案例
  • 实战案例
  • 面试
  • 系统架构
  • Spring6核心技术
  • 分布式事务

    • 分布式事务系列视频
  • SpringBoot
  • SpringCloudAlibaba
  • 🔥AI大模型项目

    • 一站式AI智能平台
    • AI智能客服系统
    • AI智能问答系统
    • 实战AI大模型
  • 中间件项目

    • 手写高性能Redis组件
    • 手写高性能脱敏组件
    • 手写线程池项目
    • 手写高性能SQL引擎
    • 手写高性能Polaris网关
    • 手写高性能RPC项目
  • 高并发项目

    • 分布式IM即时通讯系统(新)
    • 分布式Seckill秒杀系统
    • 实战高并发设计模式
  • 微服务项目

    • 简易电商脚手架项目
  • 手撕源码

    • 手撕Spring6源码
🌍知识星球
  • 总览

    • 《书籍汇总》
  • 出版图书

    • 《深入理解高并发编程:核心原理与案例实战》
    • 《深入理解高并发编程:JDK核心技术》
    • 《深入高平行開發:深度原理&專案實戰》
    • 《深入理解分布式事务:原理与实战》
    • 《MySQL技术大全:开发、优化与运维实战》
    • 《海量数据处理与大数据技术实战》
  • 电子书籍

    • 《实战高并发设计模式》
    • 《深入理解高并发编程(第2版)》
    • 《深入理解高并发编程(第1版)》
    • 《从零开始手写RPC框架(基础篇)》
    • 《SpringCloud Alibaba实战》
    • 《冰河的渗透实战笔记》
    • 《MySQL核心知识手册》
    • 《Spring IOC核心技术》
  • 关于自己
  • 关于学习
  • 关于职场
B站
Github
  • 开篇:专栏介绍

    • 开篇:分布式IM即时通讯系统正式启动
    • 面试:可以写到简历上的分布式IM即时通讯系统
  • 第01部分:需求设计

    • 第01节:为何要学习分布式IM即时通讯系统
    • 第02节:分布式IM即时通讯系统的目标与挑战
    • 第03节:分布式IM即时通讯系统功能需求与流程梳理
    • 第04节:分布式IM即时通讯系统技术流程梳理
  • 第02部分:总体架构设计

    • 第01节:分布式IM即时通讯系统总体方案目标与架构设计
    • 第02节:分布式IM即时通讯系统数据模型设计
  • 第03部分:环境搭建

    • 第01节:分布式IM即时通讯系统研发环境搭建
    • 第02节:分布式IM即时通讯系统项目工程搭建
    • 第03节:分布式IM即时通讯系统Maven私服搭建
    • 第04节:搭建并优化多节点Minio分布式文件系统
  • 第04部分:通用模型设计

    • 第01节:分布式IM即时通讯系统通用模型设计
    • 第02节:分布式IM即时通讯系统通用缓存设计
    • 第03节:混合型缓存通用模型设计与实现
    • 第04节:分布式锁通用代码设计与实现
    • 第05节:MQ消息发送通用代码设计与实现
    • 第06节:多系统共用模型与工具推送到Maven私服
    • 第07节:分布式ID生成器的设计与实现
  • 第05部分:即时通讯后端服务

    • 第01节:通用代码设计与实现
    • 第02节:自定义编解码器的设计与实现
    • 第03节:通用ChannelHanler的设计与实现
    • 第04节:登录处理器的设计与实现
    • 第05节:心跳处理器的设计与实现
    • 第06节:单聊处理器的设计与实现
    • 第07节:群聊处理器的设计与实现
  • 第06部分:即时通讯SDK

    • 第01节:发送单聊消息的流程设计与实现
    • 第02节:发送群聊消息的流程设计与实现
    • 第03节:在线状态的统一设计与实现
    • 第04节:消息监听与广播机制的设计与实现
    • 第05节:接收消息发送结果的流程设计与实现
  • 第07部分:大后端平台-通用模型

    • 第01节:领域层对象模型的设计与实现
    • 第02节:用户Session与全局异常捕获机制
    • 第03节:缓存参数过滤器的设计与实现
    • 第04节:通用拦截器规则链的设计和实现
    • 第05节:XSS漏洞校验规则的设计和实现
    • 第06节:滑动窗口IP校验规则的设计和实现
    • 第07节:资源访问校验规则的设计和实现
    • 第08节:账号安全校验规则的设计和实现
  • 第08部分:大后端平台-用户微服务

    • 第01节:用户注册与登录授权的流程设计与实现
    • 第02节:JWT Token刷新机制的流程设计与实现
    • 第03节:用户微服务常规功能的设计与实现
    • 第04节:用户微服务整合即时通讯SDK
    • 第05节:领域事件的发送与接收设计和实现
    • 第06节:用户微服务整合Dubbo的流程设计与实现
  • 第09部分:大后端平台-好友微服务

    • 第01节:好友服务常规功能的设计和实现
    • 第02节:好友微服务整合Dubbo的流程设计与实现
    • 第03节:领域事件的发送与接收设计和实现
    • 第04节:异步更新好友微服务数据的设计和实现
  • 第10部分:大后端平台-群组微服务

    • 第01节:群组微服务常规功能的设计和实现
    • 第02节:群组微服务整合Dubbo的流程设计和实现
    • 第03节:业务事件的发送与接收设计和实现
    • 第04节:异步更新群组微服务数据的设计和实现
  • 第11部分:大后端平台-消息微服务

    • 第01节:单聊消息的发送流程设计和实现
    • 第02节:群聊消息的发送流程设计和实现
    • 第03节:单聊消息的拉取流程设计和实现
    • 第04节:群聊消息的拉取流程设计和实现
    • 第05节:单聊消息的已读流程设计和实现
    • 第06节:群聊消息的已读流程设计和实现
    • 第07节:单聊消息的撤回流程设计和实现
    • 第08节:群聊消息的撤回流程设计和实现
    • 第09节:图片、文件和语音消息的设计和实现
    • 第10节:消息监听回调流程的设计和实现
  • 第12部分:大后端平台-视频通话

    • 第01节:视频通话呼叫发起流程设计和实现
    • 第02节:视频通话呼叫取消流程设计和实现
    • 第03节:视频通话呼叫失败流程设计和实现
    • 第04节:视频通话呼叫接受流程设计和实现
    • 第05节:视频通话呼叫拒绝流程设计和实现
    • 第06节:视频通话呼叫挂断流程设计和实现
    • 第07节:视频通话同步会话状态流程设计和实现
  • 第13部分:大前端UI-基础架构

    • 第01节:Node.js基础环境搭建
    • 第02节:通用基础功能设计与研发
  • 第14部分:大前端UI-用户模块

    • 第01节:注册与登录流程的设计与实现
    • 第02节:页面主体框架设计与实现
  • 第15部分:大前端UI-好友模块

    • 第01节:好友主体页面的设计与实现
    • 第02节:好友关联单聊页面的设计与实现
  • 第16部分:大前端UI-群组模块

    • 第01节:群组主体页面的设计与实现
    • 第02节:创建群组流程的设计与实现
    • 第03节:修改群组流程的设计与实现
    • 第04节:邀请好友进群流程的设计与实现
    • 第05节:群主踢人出群流程的设计与实现
    • 第06节:成员退出群组流程的设计与实现
    • 第07节:群主解散群组流程的设计与实现
    • 第08节:发送群聊消息流程的设计与实现
  • 第17部分:大前端UI-消息模块

    • 第01节:发送文字消息流程的设计与实现
    • 第02节:发送表情消息流程的设计与实现
    • 第03节:发送图片消息流程的设计与实现
    • 第04节:发送文件消息流程的设计与实现
    • 第05节:发送语音消息流程的设计与实现
    • 第06节:双向视频通话流程的设计与实现
    • 第07节:查看历史消息流程的设计与实现
    • 第08节:消息已读未读流程的设计与实现
    • 第09节:实时消息删除流程的设计与实现
    • 第10节:实时消息撤回流程的设计与实现
    • 第11节:群聊@功能流程的设计与实现
  • 第18部分:OpenAI大模型接入服务

    • 第01节:OpenAI总体对接流程架构设计
    • 第02节:OpenAI接入服务总体框架设计
    • 第03节:OpenAI领域模型与核心接口设计
    • 第04节:OpenAI大模型对接设计和实现
    • 第05节:单聊消息对接OpenAI大模型
    • 第06节:群聊消息对接OpenAI大模型
    • 第07节:扩展实现对接多种OpenAI大模型
  • 第19部分:专栏总结

    • 总结:分布式IM即时通讯系统整体专栏总结

《分布式IM系统》大前端UI-基础架构-第01节-Node.js基础环境搭建

作者:冰河
星球:http://m6z.cn/6aeFbs
博客:https://binghe.site
文章汇总:https://binghe.site/md/all/all.html
源码获取地址:https://t.zsxq.com/0dhvFs5oR
课程视频:https://t.zsxq.com/17SdXEV8q

沉淀,成长,突破,帮助他人,成就自我。

  • 本节难度:★★☆☆☆
  • 本节重点:搭建Node.js基础环境,为设计和研发分布式IM即时通讯系统的前端页面做准备,同时,理解分布式IM即时通讯系统前端页面在整个分布式IM即时通讯系统中的作用,能够结合即时通讯后端服务、即时通讯SDK以及大后端平台,整体理解各种类型的消息在分布式IM即时通讯系统中的流转过程。
  • 课程视频:https://t.zsxq.com/17SdXEV8q

大家好,我是冰河~~

很多小伙伴都跟我说:分布式IM即时通讯系统必须安排前端,不然写了这么多代码,看不到实际的聊天效果,总感觉学的云里雾里的,为了让大家更好的学习分布式IM即时通讯系统,也为了让大家更好的体验自己的学习成果。这不,我还临时学习了前端技术,对于长期专注于后端技术和底层技术的我来说,学习前端技术实属不易。经过一段时间的学习和打磨,总算是前端入门了吧。接下来,就跟大家一起开发分布式IM即时通讯系统的前端页面。

一、前言

相信进入咱星球学习的小伙伴肯定都用过QQ和微信了,对于即时通讯软件也必然不会陌生了,截止到目前,我们已经将整个分布式IM即时通讯系统后端的主要功能基本开发完毕了。

在消息流转层面,支持:发送文字、图片、文件、语音、视频、消息缓存、消息存储、消息未读、已读、撤回,离线消息、历史消息、单聊、群聊,多端同步,以及其他一些需求。

在用户管理层面,支持:添加好友、查看还有列表、删除好友、查看好友信息、创建群聊、加入群聊、查看群成员信息、退出群聊、修改群昵称、拉人进群、踢人出群、解散群聊、填写群公告、修改群备注以及其他用户相关的需求等。

接下来,我们就要为分布式IM即时通讯系统设计和研发前端页面了,并且我们还要对接OpenAI大模型,大家跟上了吗?

二、本节诉求

搭建Node.js基础环境,为设计和研发分布式IM即时通讯系统的前端页面做准备,同时,理解分布式IM即时通讯系统前端页面在整个分布式IM即时通讯系统中的作用,能够结合即时通讯后端服务、即时通讯SDK以及大后端平台,整体理解各种类型的消息在分布式IM即时通讯系统中的流转过程。

三、搭建环境

搭建node.js环境的过程比较简单,这里,我们分别以Windows系统和MacOS系统搭建node.js环境为例进行说明。

3.1 Windows系统搭建环境

在Windows系统中搭建node.js环境的步骤如下所示。

(1)下载安装包

到链接:https://nodejs.cn/download 下载node.js安装包。


(2)安装nodejs

按照如下图示步骤安装node.js。


查看完整文章

加入冰河技术知识星球,解锁完整技术文章与完整代码

在 GitHub 上编辑此页
上次更新: 2026/4/29 16:18
Contributors: binghe001
Next
第02节:通用基础功能设计与研发
阅读全文
×

扫码或搜索:冰河技术
发送:290992
即可立即永久解锁本站全部文章

星球会员
跳转链接