首页
学习
活动
专区
工具
TVP
发布

HTML5 - websocket的应用 之 简易聊天室

因此传统HTTP协议要想实现聊天室就必须客户端实时的(比如每秒1次)发送ajax轮询请求,如果服务器有消息需要返回就会响应,如果没有就是空轮询。...“聊天室”具体实现步骤: 初步应用代码见上篇《 HTML5 - 开发一个自己的websocket服务器》,主要记录了websocket怎么启动一个本地服务并应用的。...在之前代码的基础上,新增聊天室该有的广播内容、以及新增消息的append功能。...要实现聊天室,得需要以下三个主要功能: 1、 新人进入聊天室,服务器广播发送给大家“xx进入聊天室” 2、某人离开聊天室,服务器广播发送给大家“xx离开聊天室” 3、某人发送消息到聊天室,服务器广播发送给大家...源码如下地址: 聊天室源码  聊天室效果如下: 三个标签页 - 模拟三个人进入了聊天室 ? 聊天内容截图: ? ? 以上,来自腾讯课堂课程学习笔记。

4.8K21

基于 HTML5 Canvas 的拓扑组件开发

在现在前端圈大行其道的 React 和 Vue 中,可复用的组件可能是他们大受欢迎的原因之一, 在 HT 的产品中也有组件的概念,不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去实现的..., 也就是说如果你有过使用 Canvas 的开发经验你就可以来封装自己的组件。...下面我以一个进度环为例,来探究一下如何使用ht.js封装出一个拓扑组件。 效果图 ?...代码实现 前置知识 自定义组件 除了HT预定义的组件类型外,用户还可以自定义扩展类型,自定义有两种方式: 直接将type值设置成绘制函数:function(g, rect, comp, data...绘制组件 在绘制组件的过程中,我们需要把一些边界条件和特殊情况考虑到,来保持组件的扩展性和稳定性 下面就是一些我的心得 在做了 g 操作的头尾分别使用 save 和 restore ,以此来保障 g

1.5K20
您找到你想要的搜索结果了吗?
是的
没有找到

基于 HTML5 Canvas 的拓扑组件 ToolTip 应用

首先建立一个视图组件(这里我们以 ht.graph.GraphView 为例,其余组件基本与之相同),通过调用组件的 enableToolTip() 方法可以启用 ToolTip 功能,之后创建一个测试用的...首先我们先来看一下左侧部分,由于大部分组件的在 ToolTip 上的使用方法类似,所以我们还是以 GraphView 来作为代表例子。...使用 HT UI 的 Popover 插件 UI 库是一款功能强大的界面组件库,基于 HT 核心包的优秀框架和 HTML5 先进的 Canvas 机制,具有易上手、高性能、易扩展、组件丰富、跨平台等特点...在这个例子中,添加了三个 UI 中的 Button 组件,并分别设置了三种不同的 Popover。...与前两种使用 UI 自带的组件不同,这里我们自定义了一个 ht.ui.EchartView 组件实现 Echarts 的显示功能,UI 库提供了自定义组件的功能,像上图中的 Button 也可以去自己定义

1.1K10

基于HTML5组件延迟加载技术实现

HT for Web的HTML5组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的等待时间...http://www.hightopo.com/guide/readme.html 进入正题,今天用来做演示的Demo是,客户端请求服务器读取系统文件目录结构,通过HT for Web的HTML5组件显示系统文件目录结构...整体的思路是这样子的,当然这离我们要实现的树组件的延迟加载技术还有些差距,那么,HT for Web的HTML5组件的延迟加载技术是怎么实现的呢?不要着急,马上开始探讨。...= createData(file, parent); n.a('loaded', true); dm.add(n); }); } 如此,HT for Web的HTML5...树组件延迟加载技术就设计完成了,我在服务器的控制台打印出请求路径,看看这个延迟加载是不是真的,如下图: ?

2.2K100

HTML5组件延迟加载技术实现

HT for Web的HTML5组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的等待时间...http://www.hightopo.com/guide/readme.html 进入正题,今天用来做演示的Demo是,客户端请求服务器读取系统文件目录结构,通过HT for Web的HTML5组件显示系统文件目录结构...我就不多说,大家自己研究去吧; 最重要的是要引入HT for Web的核心包,这个包不引入的话,下面的HT for Web组件就无法使用...整体的思路是这样子的,当然这离我们要实现的树组件的延迟加载技术还有些差距,那么,HT for Web的HTML5组件的延迟加载技术是怎么实现的呢?不要着急,马上开始探讨。...= createData(file, parent);         n.a('loaded', true);         dm.add(n);     }); } 如此,HT for Web的HTML5

1.7K50

HTML5拓扑图形组件设计之道(一)

HT for Web(http://www.hightopo.com/guide/readme.html)提供了涵盖通用组件、2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表达的我们希望提供...讨论前先设定话题的边界,HT是基于HTML5的图形组件库,因此文章的案例更多会涉及HTML和JavaScript语言,但并不局限于Web前端,设计思想上同样适用于任何GUI语言平台。...因此我选择在话题展开之前,先用HT来扩展定制几个应用案例,以便大家了解HT组件及其扩展设计思路。...此例子麻雀虽小五脏俱全,三个部分分别采用三种方式实现了自定义组件,同时不同组件共享同一数据源,在呈现的基础上还支持桌面和移动端的Mouse和Touch的交互,还有不同终端屏幕的组件布局功能。...这样的问题描述完全无法定位根源,到底时后台数据库问题,网络通讯问题,解析数据问题,设置模型问题还是组件封装问题?

1K90

一周简报|美洽SDK上线免费电话回呼插件,可实现自动回呼功能

单纯的直播正在成为过去式,“直播+聊天”已经成为趋势,而由于直播业务场景的实时特性,直播互动往往要通过聊天室产品实现,尽管直播聊天室看似只是直播中的一个功能,然而对消息处理做不好,就容易导致闪退、卡顿等问题...尤其是在一个聊天室中用户并发量上大的时候,在这种高并发的场景下对IM的能力要求极其高。...云适配决定将在为客户提供移动化过程中积累的大量基于HTML5的前端开发组件,以开源的形式贡献出来,并用专门的团队进行运营,帮助企业开发者告别同类型代码重复开发,大大提高了企业开发效率,这个开源工具就是AmazeUI...由于尊崇移动优先和组件化开发理念,开发组件源自企业实际应用,使用的工具使用能力使得AmazeUI现在已成为国内最大的HTML5前端开源框架了,包括专门针对跨屏HTML5网页开发的AmazeUIWeb和针对移动端...目前,AmazeUI在尊崇“一切皆组件”的理念下,以开源的形式提供了包含25个CSS组件、27个JS组件、21款包含近60个主题的Web组件,吸引了超过引超过40万开发者加入。

1.9K70

矢量化的HTML5拓扑图形组件设计

但,我还是不喜欢DOM上太重都是元素,不喜欢庞大包罗万象搞得没有一家能完美实现的标准,另外用XML、Flex的MXML或Sliverlgiht/WPF的XAML来描述图形实在是笨重不灵活,基于HTML5...sunrise',             rect: [120, 80, 120, 80]         }     ] }); 如上代码注册了一个名为'group-sunrise'的新矢量,其由四部分组件...因此HT for Web不仅定义矢量格式、实现了矢量绘制,还提供了矢量编辑工具设计器,用户拖拖拽拽就能绘制出矢量图形,然后导出JSON,注册到HT之后即可使用到所有的HT组件上,注意哦:是所有组件,不仅仅是拓扑...、不仅仅是3D、还有所有通用组件: ?...Cavnas的2D孰优孰劣争论,SVG的确也有highcharts这样不错应用的案例,HT成功实现所有组件采用Canvas设计,而Sencha和Kendoui等流行的通用组件都采用DOM方式堆积也发展的不错

1.4K20

HT for Web的HTML5组件延迟加载技术实现

HT for Web的HTML5组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的等待时间...进入正题,今天用来做演示的Demo是,客户端请求服务器读取系统文件目录结构,通过HT for Web的HTML5组件显示系统文件目录结构。...整体的思路是这样子的,当然这离我们要实现的树组件的延迟加载技术还有些差距,那么,HT for Web的HTML5组件的延迟加载技术是怎么实现的呢?不要着急,马上开始探讨。...= createData(file, parent); n.a('loaded', true); dm.add(n); }); } 如此,HT for Web的HTML5...树组件延迟加载技术就设计完成了,我在服务器的控制台打印出请求路径,看看这个延迟加载是不是真的,如下图: ?

2K100

HT for Web的HTML5组件延迟加载技术实现

HT for Web的HTML5组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的等待时间...进入正题,今天用来做演示的Demo是,客户端请求服务器读取系统文件目录结构,通过HT for Web的HTML5组件显示系统文件目录结构。...整体的思路是这样子的,当然这离我们要实现的树组件的延迟加载技术还有些差距,那么,HT for Web的HTML5组件的延迟加载技术是怎么实现的呢?不要着急,马上开始探讨。...= createData(file, parent);         n.a('loaded', true);         dm.add(n);     }); } 如此,HT for Web的HTML5...树组件延迟加载技术就设计完成了,我在服务器的控制台打印出请求路径,看看这个延迟加载是不是真的,如下图: ?

1.8K40

扩展HT for Web之HTML5表格组件的Renderer和Editor

今天我们就来实现一把自定义HTML5表格组件的Renderer和Editor,为了更直观地演示编辑效果,我们正好利用HT for Web强大的HTML5拓扑图组件 首先来瞧瞧效果: ?...按照HT for Web组件的设计惯例,我们需要创建一个Div作为view,在view中包含一个canvas元素,组件内容在canvas上绘制; 2. editor需要与用户有交互,因此,需要在view...用户通过拖拉组件可以改变角度,这个改变是连续的,而且在拖拉的时候有可能鼠标会离开组件区域,要实现离开组件区域也能够正确的改变值,那么这时候就需要调用HT for Web的startDragging()方法...这些就是组件绘制的所有逻辑,但是有一点必须注意,在绘制完组件后,必须调用下restore()方法,因为在initContext()方法中做了一次save()操作,接下来看看具体实现(代码有些长); setValue...原因很简单,就如第3点种提到的,用户在拖拉组件的时候,有可能拖离了组件区域,这时候只能通过window上的mousemove及mouseup两个事件监听令用户继续操作; // 监听window的mousemove

1.6K70

扩展HT for Web之HTML5表格组件的Renderer和Editor

今天我们就来实现一把自定义HTML5表格组件的Renderer和Editor,为了更直观地演示编辑效果,我们正好利用HT for Web强大的HTML5拓扑图组件 首先来瞧瞧效果: ?...按照HT for Web组件的设计惯例,我们需要创建一个Div作为view,在view中包含一个canvas元素,组件内容在canvas上绘制;     2. editor需要与用户有交互,因此,需要在...用户通过拖拉组件可以改变角度,这个改变是连续的,而且在拖拉的时候有可能鼠标会离开组件区域,要实现离开组件区域也能够正确的改变值,那么这时候就需要调用HT for Web的startDragging()方法...这些就是组件绘制的所有逻辑,但是有一点必须注意,在绘制完组件后,必须调用下restore()方法,因为在initContext()方法中做了一次save()操作,接下来看看具体实现(代码有些长); setValue...原因很简单,就如第3点种提到的,用户在拖拉组件的时候,有可能拖离了组件区域,这时候只能通过window上的mousemove及mouseup两个事件监听令用户继续操作; // 监听window的mousemove

1.4K30
领券