This demo starts from [Real time Interaction - Education Edition]( https://www.tencentcloud.com/document/product/1168/53651 ) Integrated mobile e-commerce version of the business function SDK. Supports functions such as microphone connection, barrage, and number management. Temporary experience link。
- nextjs 14+ ,Supporting flexible business development modes and performance optimization solutions, static deployment, SSR rendering, reference documents
- nodejs 20,If there are multiple nodejs environments locally, it is recommended to use 'nvm' for management, reference documents
- bootstrap,Basic style and responsive feature support, reference documents
npm i
npm run dev
By default, port 8100 is started and can be modified in the 'package. json' file.
The .env
environment variable file currently mainly includes the following variables:
- NEXT_PUBLIC_BASE_PATH:The base path for project access, which defaults to
/next
,http://localhost:8100/next
Before becoming familiar with the project architecture, it is necessary to understand the predefined routing structure of the nextjs framework( https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts )And [document]( https://nextjs.org/docs/app/api-reference/file-conventions ).
After reading the above content, refer to this figure to understand the business functions of the code base. The basic business functions are due to context:
- It should be noted that by default, it is written in the
app
directory as a server-side component. The code supports node-side rendering. For the pure browser-side basic library introduction method, refer tobootstrap.min.js
through external links andnpm
package introduction method. Seewatch_sdk
.
本demo从实时互动-教育版的业务功能SDK集成移动电商版本。 支持连麦,弹幕,人数管理等功能。临时体验地址。
- nextjs 14版本 ,支持较灵活的业务开展模式和性能优化方案,静态化部署,SSR渲染,相关文档
- nodejs20,如果本地有多nodejs 环境,建议用
nvm
进行管理,相关文档 - bootstrap,基础样式和响应式功能支持,相关文档
同时开发watch_sdk,需要链接基础库
npm link /your/path/watch_sdk
,不开发忽略此条
npm i
npm run dev
默认启动 8100 端口,可以在package.json
文件内修改。
.env
环境变量文件,目前主要包含以下变量:
- NEXT_PUBLIC_BASE_PATH:项目访问的基础路径,默认为
/next
,启动环境后从http://localhost:8100/next
路径访问首页
熟悉项目架构前,需要了解nextjs框架预定义路由结构和文件。 阅读完上述内容后,参考此图以了解代码基座业务功能,基础业务功能由于contexts:
- 需要注意的是默认写在
app
目录下为服务端组件,代码支持node端渲染,纯浏览器端基础库引入方式参考bootstrap.min.js
通过外链引入,npm
包引入方式参考watch_sdk
。