云端极简部署Svelte3聊天室
一 、通过云开发平台快速创建初始化应用
1.创建相关应用模版请参考链接:尝鲜少代码高性能的Svelte框架
2.完成创建后就可以在github中查看到新增的Vite仓库
二 、 本地编写 Svelte3聊天室
1.将应用模版克隆到本地
- 首先假定你已经安装了Git、node,没有安装请移步node官网进行安装。克隆项目:
git clone + 项目地址
- 进入项目文件
cd Svelte
- 切换到feature/1.0.0 分支上
git checkout feature/1.0.0
- 安装依赖包
npm install
- 启动服务
npm run dev
这里打开浏览器8080端口,并出现默认页面。
2.项目结构目录
3.自定义导航栏Navbar+菜单栏Tabbar
项目中顶部导航条及底部菜单栏均是基于svelte定制开发的自定义组件。
4.自定义手机端弹窗组件
svelte-popup 一款基于Svelte3.x开发自定义多功能svPopup弹出框组件,支持超过20+参数自由配置、组件式+函数式混合调用方式。
5.config.js配置文件
如何在svelte.js项目中使用sass/less编写样式?可以安装 sass 及 svelte-preprocess 依赖。
/*** svelte.config.js基础配置文件*/import adapter from '@sveltejs/adapter-auto'
import path from 'path'
import SvelteProcess from 'svelte-preprocess'/** @type {import('@sveltejs/kit').Config} */
const config = {kit: {adapter: adapter(),vite: {resolve: {alias: {'@': path.resolve('./src'),'@assets': path.resolve('./src/assets'),'@utils': path.resolve('./src/utils')}}}},// allow you to use Svelte with tools like TypeScript, PostCSS, SCSS, and Less.preprocess: SvelteProcess()
};export default config
6.SvelteKit公共模板及错误页
使用svelteKit构建的项目,公共模板__layout.svelte及错误页__error.svelte配置如下。
<script>import { onMount } from 'svelte'import { page } from '$app/stores'import { goto } from '$app/navigation'import { userinfo } from '@/store/index.js'let whiteRoute = ['/auth/login', '/auth/register']onMount(() => {if(!$userinfo) {goto('/auth/login')}else {if(whiteRoute.includes($page.url.pathname)) {goto('/')}else {goto($page.url.pathname)}}})
</script><div class="sv__container flexbox flex-col"><slot />
</div><style>@import '@/app.scss';@import '@assets/css/reset.scss';@import '@assets/css/layout.scss';@import '@assets/fonts/iconfont.css';
</style>
<!-- //Svelte错误页 -->
<script context="module">export function load({ error, status }) {return {props: { error, status }}}
</script><script>import Navbar from '$lib/Navbar'export let statusexport let errorfunction goBack() {history.go(-1)}
</script><svelte:head><title>404错误</title>
</svelte:head><Navbar title="Page Error!!!" /><div class="sv__scrollview flex1"><div class="sv__page-error flexbox flex-col flex-alignc flex-justifyc"><div class="sv__page-error-img"><img src="404.png" alt="" /></div><div class="sv__page-error-content"><div class="c-red fs-36">┗| {status} |┛ 嗷~~</div><div class="c-999 mt-10">{error.message}</div><div class="mt-20 sv__btn sv__btn-default" on:click={goBack}><i class="iconfont icon-arrL"></i> 返回首页</div></div></div>
</div>
7.状态管理+本地存储
svelte框架也提供了创建状态管理svelte/store,配置localStorage本地化存储服务。
/*** Svelte状态管理
*/import { writable } from 'svelte/store'const createStore = (value, key) => {const { subscribe, set, update } = writable(value)return {// 持久化存储useStorage: () => {const data = localStorage.getItem(key)if(data) {set(JSON.parse(data))}// 订阅subscribe(val => {[null, undefined].includes(val) ? localStorage.removeItem(key) : localStorage.setItem(key, JSON.stringify(val))})},subscribe,set,update,}
}export const userinfo = createStore(localStorage.getItem('userinfo')||null, 'userinfo')
8.实现仿朋友圈下拉刷新
使用 svelte.js+mescroll 实现仿朋友圈下拉转圈功能。
<!-- //朋友圈模板 -->
<script>import { onMount } from 'svelte'import Navbar from '$lib/Navbar'import MeScroll from 'mescroll.js/mescroll.min.js'import 'mescroll.js/mescroll.min.css'onMount(() => {let mescroll = new MeScroll('mescroll', {down: {auto: false,offset: 40,callback: downCallback},// up: {// callback: upCallback// }})// 下拉刷新的回调function downCallback() {console.log('下拉刷新...')setTimeout(() => {// 隐藏下拉刷新的状态;mescroll.endSuccess()}, 2000)}// 上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10function upCallback(page) {console.log('上拉加载...')var pageNum = page.num; // 页码, 默认从1开始var pageSize = page.size; // 页长, 默认每页10条}})// ...
</script><Navbar title="朋友圈" center transparent><svelte:fragment slot="right"><div><i class="iconfont icon-tupian"></i></div><div class="ml-30"><i class="iconfont icon-fabu"></i></div></svelte:fragment>
</Navbar><div class="sv__scrollview flex1"><div id="mescroll" class="mescroll"><div><div class="sv__uzone">...</div></div></div>
</div>
9.实现聊天功能
聊天页面文本框支持文字+emoj混排,光标处插入表情、网址/图片/视频预览、红包等功能。并且底部文本框单独抽离了一个editor.svelte组件。
<script>/*** @Desc Svelte.js实现聊天编辑框组件* @Time andy by 2022-04* @About Q:282310962 wx:xy190310*/// 编辑器内容export let editorimport { tick, createEventDispatcher } from 'svelte'const dispatch = createEventDispatcher()let editorNodelet lastCursor = null// 获取光标最后位置function getLastCursor() {let sel = window.getSelection()if(sel && sel.rangeCount > 0) {return sel.getRangeAt(0)}}// 光标位置插入内容export async function addHtmlInCursor(html) {// ...}// 删除编辑器内容export async function deleteHtml() {let rangelet sel = window.getSelection()if(lastCursor) {sel.removeAllRanges()sel.addRange(lastCursor)}range = getLastCursor()range.collapse(false)document.execCommand('delete')await tick()editorNode.blur()}function handleInput() {editor = editorNode.innerHTMLlastCursor = getLastCursor()}function handleClick() {dispatch('click')lastCursor = getLastCursor()}function handleFocus() {dispatch('focus')lastCursor = getLastCursor()}function handleBlur() {dispatch('blur')}
</script><divclass="editor"bind:this={editorNode}contenteditable="true"bind:innerHTML={editor}on:input={handleInput}on:click={handleClick}on:focus={handleFocus}on:blur={handleBlur}style="user-select: text; -webkit-user-select: text;"
></div>
以上就是基于svelte.js+svelteKit开发仿微信app界面聊天实例的一些分享,希望对大家有所帮助!
三 、 云端一键部署上线应用
1.上传代码
git add .
git commit -m '添加你的注释'
git push
2.在日常环境部署
一键进行应用部署。在应用详情页面点击日常环境的「部署」按钮进行一键部署,部署状态变成绿色已部署以后可以点击访问部署网站查看效果。
3.配置自定义域名在线上环境上线
- 配置线上环境自定义域名。在功能开发验证完成后要在线上环境进行部署,在线上环境的「部署配置」-「自定义域名」中填写自己的域名。例如我们添加一个二级域名 company.workbench.fun 来绑定我们部署的前端应用。然后复制自定义域名下方的API网关地址对添加的二级域名进行CNAME配置。
- 配置CNAME地址。复制好 API网关域名地址后,来到你自己的域名管理平台(此示例中的域名管理是阿里云的域名管理控制台,请去自己的域名控制台操作)。添加记录的「记录类型」选择「CNAME」,在「主机记录」中输入你要创建的二级域名,这里我们输入「company」,在「记录值」中粘贴我们之前复制的 API网关域名地址,「TTL」保留默认值或者设置一个你认为合适的值即可。
- 在线上环境部署上线。回到云开发平台的应用详情页面,按照部署的操作,点击线上环境的「部署按钮」,部署完成以后就在你自定义的域名进行了上线。CNAME 生效之后,我们输入 company.workbench.fun(示例网址) 可以打开部署的页面。至此,如何部署一个应用到线上环境,如何绑定自己的域名来访问一个线上的应用就完成了,赶紧部署自己的应用到线上环境,用自己的域名玩起来吧
4.项目预览效果
一键创建svelte应用模版链接 :https://workbench.aliyun.com/application/front/create?fromConfig=25&fromRepo=sol_github_25
参考文献:https://www.cnblogs.com/xiaoyan2017/p/16110203.html
云端极简部署Svelte3聊天室相关推荐
- 宝塔面板+腾讯云轻量应用服务器部署fiora聊天室
fiora 是一款有趣的开源聊天应用. 基于 node.js, mongodb, react 和 socket.io 等技术开发,可以克隆源码并部署到自己的服务器.下面就为大家介绍如何将fiora部署 ...
- 通过Aidlux实现Yolov5人流跟踪统计的极简部署并发送手机提醒
1.AidLux介绍 官网:AidLux智能物联网(AIoT)应用开发和部署平台-阿加犀智能科技 AidLux是基于ARM架构的跨生态(Android/鸿蒙+Linux)一站式AIoT应用快速开发和部 ...
- 极简+全场景,华为5G使能快速部署+极致体验
随着"新基建"的不断推进,作为七大战略方向中排名首位的"5G网络建设",大大加快了前进的脚步. 3月6日,工信部召开"加快5G发展专题会", ...
- 锐捷发布极简以太全光解决方案 打造“不一样”的全光网
3月9日,锐捷网络举办以"不一样的全光网"为主题的媒体发布会,正式对外发布新一代全光网络解决方案--极简以太全光解决方案(以下简称极简光方案).这个方案正是面向不断升温的全光网络市 ...
- workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的)...
workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...
- springboot 使用 Spring Boot WebSocket 创建聊天室 2-11
什么是 WebSocket WebSocket 协议是基于 TCP 的一种网络协议,它实现了浏览器与服务器全双工(Full-duplex)通信-允许服务器主动发送信息给客户端. 以前,很多网站为了实现 ...
- WebRTC 教程四: WebRTC聊天室设计和搭建
这篇文章主要介绍了 WebRTC 聊天室设计和搭建,主要包括信令服务器及客户端网页设计. WebRTC 教程一:WebRTC信令.架构和 API 入门 WebRTC 教程二:WebRTC API 和 ...
- php即时聊天的框架_workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的)...
workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...
- workerman php直播,workerman PHP聊天室框架
workerman-chat是一个以workerman作为服务器容器,使用PHP开发的基于Websocket协议的一个可分布式部署的聊天室框架. workerman-chat采用gateway wor ...
最新文章
- Linux5下DHCP配置
- Java单例设计模式(实现Java的一个类只有一个对象)
- 为什么德国人工作这么慢,但效率却很高?
- C语言已知二进制码求循环码,循环码系统与非系统编码的C语言实现
- SQL Server CONVERT() 函数,Date 函数
- 使用Runnable配合Thread创建线程
- 渐进式web应用程序_渐进式Web应用程序与加速的移动页面:有什么区别,哪种最适合您?
- idea查看一个类的所有子类_java new一个对象的过程中发生了什么
- 为什么Spark能成为最火的大数据计算引擎?它是怎样工作的?
- Git--生成公钥和私钥并添加gitlab访问权限
- 2016年Google面筋记录
- 2.从Paxos到Zookeeper分布式一致性原理与实践---一致性协议
- 适合完全初学者的Python自学路线图和学习方法
- Microsoft TTS(Text To Speech)语音包的简单应用
- 斐讯K2_V22.5.9.163刷华硕固件--详细教程
- 阿铭Linux_网站维护学习笔记20190417
- 【密码术】openssl椭圆曲线密钥对生成
- 修复windows系统引导
- 2023养老展/山东养老服务业展/济南老年用品展/老龄产业展
- 想学Docker?我教你啊~