Electronic Joint Business

Solution for E-Business

web

在 .NET 4.5 中使用 Websocket

作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas、本地存储、多媒体编程接口、WebSocket 等等。这其中有“Web 的 TCP ”之称的 WebSocket 格外吸引开发人员的注意。WebSocket 的出现使得浏览器提供对 Socket 的支持成为可能,从而在浏览器和服务器之间提供了一个基于 TCP 连接的双向通道。Web 开发人员可以非常方便地使用 WebSocket 构建实时 web 应用,

IETF 的 RFC 6455 对 WebSocket 协议进行了标准化, 在 Wikipedia 和 W3C 站点上提供了更多的介绍和详细资料。

WebSocket 连接是通过在客户端和服务器之间的 HTTP 握手来建立的(前缀是 “ws://” 或者 “wss://”) 。拿 Wikepedia 上例子来说明,客户端会这样发出请求:

GET /mychat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13
Origin: http://example.com

之后服务器发出响应来接受连接:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

这里的 “Sec-WebSocket-Key” 和 “Sec-WebSocket-Accept” 用于通过密钥验证算法来确认客户端和服务器之间的连接。

>>> 阅读全文

 

, , , ,

用 vert.x 和 angular.js 构建基础 Axon 框架示例

在邮件列表上我常看到不断有人在问哪可以找到基础示例,最好用到了 vert.x 。由于本人对 Axon 和 vert.x 都略知一二,所以我想略尽薄力。这里我基于 vert.x 创建了个非常基础的 Axon 应用1。它用来维护个人的“待办事项”。这些事项可通过连接的网络浏览器间查阅,用户可以创建新的“待办事项”,也可以把某个事项标为“完成”。

我在浏览 Devoxx 站点时,正好学习了一个 javascript 前端框架 AngularJS 。这对 vert.x 技术栈来说是个很棒的补强。之前我一直使用 Bootstrap 来完成前端的工作,所以这个框架用起来很是顺手。图1-1 演示了本应用的最终效果。如果你想知道这个应用是怎么创建的,请继续阅读。

概述
我们创建的是个待办事项的演示。我们希望可以在网上创建待办事项。待办事项可被存储,当其他人连接到这个 Web 应用时也可以看到相同的待办事项。一旦待办事项被更新,或者将它们标为“完成”,这些变动会被推至其他连接的浏览器。图1-2 给出了示例的设计架构。你可以从 github 上检出这个示例。你可以查阅示例中的 readme 文件来运行本示例。

图1-2 中中包含了大量信息。首先客户端(在本例中是浏览器)通过 vert.x 事件总线与后端通讯。创建新事项或者或标记事项“已完成”都是在总线上发送给某个端点的一条消息。这些消息被侦听该端点的处理器( handler) 检出。接着,处理器通过 Axon 网关发出相应的命令(command) 让命令处理器(command handler)进行后续步骤,命令处理器使用 ToDo 聚合体 (aggregate) 来完成实际操作。Axon 用事件来改变状态。这些事件也为 ToDo 事件侦听器所使用,该组件会发送消息给 vert.x 事件总线以持久化待办事项,还会发送消息给客户端在侦听的主题。在客户端上,我们通过 AngularJS 控制器注册了个侦听器来侦听这些 vert.x 事件并更新数据模型。所有的更改会为视图自动拾取并更改。

听起来挺复杂的,下面我们逐一对某些片段进行讲解。

>>> 阅读全文

 

, , , , , ,

WebGL 教程 (一)三角形和正方形

文章评价:

欢迎来到我的第一篇 WebGL 教程 !本文借鉴了 NeHe 的 OpenGL 教程第二章,它是学习游戏开发的 3D 图形中好文章。本文将带你学习如何在网页上绘制三角形和正方形。也许这不够酷,但很好地阐述了如何用 WebGL 编程;如果你明白了这部分是如何工作,那么剩下的就相当简单了。

我们先看一下本文在支持 WebGL 的浏览器中的运行效果:

要继续本教程,你需要安装支持 WebGL 的浏览器,比如 IE11、 FireFox、Chrome 或者 Safari 等。 下面我们将继续了解如何用 WebGL 绘制三角形和正方形。

注意: 本教程是面向那些具有一定的编程知识,但没有体验过 3D 图形编程的人群,目标是让你从零开始,透过运行代码深入了解其工作原理,以便能尽快地开始编写自己的 3D 网页。我在自学 WebGL 的时候顺便写了这些教程,难免会有毗漏,欢迎大家斧正。如果您发现哪里存在谬误,请麻烦给我留言并加以指正。

>>> 阅读全文

 

, , , , , , ,

用 WebGL 和 HTML5 创建三维分子查看器

简介
许多人对 OpenGL 相当熟悉,但是对使用 WebGL 就有一点陌生。然而,许多 OpenGL 的概念和格式都可以应用到 WebGL 上。本文打算在 WebGL 编程方面做出一些尝试,可以让你了解 WebGL 的一些难易程度。象我这种略知 OpenGL 而对 WebGL 完全没概念的新手,这个例子也只花了我不到 6 个小时。现在有许多用 Java applet 或 C++ 程序写好的查看器。本项目尝试用 Javascript 和 WebGL 来完成同样的工作。让人惊讶的是,这一点也不难。

背景
WebGL 是一种 3D 绘图标准,这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定,WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL 技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计 3D 网页游戏等等。

如何使用本文的代码

将本文的代码安装到 Web 服务器上,你可以选用本地服务器,也可以选择远程服务器。打开 index.html ,选择 Choose File 按钮,从本机选一个 PDB 文件,然后你就可以看到分子了。

这是一些快捷键:

>>> 阅读全文

 

, , , , , ,

Rails3 技术手册 (一) 概述

英文原文
Ruby on Rails 是用于快速简洁地开发 Web 应用框架。它被 37signal 公司的项目管理工具 Basecamp 中剥离出来,其作者 David Heinemeier Hansson 率先用 Rails 着手解决手边的现实问题。 我们会发现用 Rails 进行开发时充满乐趣, Rails 负担起了开发中那些无聊的琐事,因此开发者能专注于所要解决的问题本身。

你如果不理解这些开发中的琐事,可以看一下下面的例子:编写过 Web 应用的开发者都不可避免地会用到字典结构、缓存、数据持久化、模板系统、测试框架、路由等等组件。Rails 自身就带了这堆让应用上线运行所必需的组件,而且作者在编写它们时充分考虑了彼此的适配问题。以往希望模板语言能和复杂的 ORM 层能在一起工作的麻烦现在再也没有了。一切将是如此简单。

现在开发者无需再为数据库等的组件编写大量繁琐的 XML 配置。Rails 基于约定而非配置,配置因而精简到最少。假如 Animal 类就是关联到数据库的 animals 数据表,为什么还要让开发者花时间写配置文件来链接它们? 这一切就让 Rails 来帮你吧。

简而言之,Rails 让 Web 开发充满乐趣。

架构
Rails 应用开发是基于模型-视图-控制器模式的 (MVC) 的。想了解 Rails 是如何使用 MVC 的, 最简单的办法是透过了解 Rails 请求的生命周期。如图1-1所示:

>>> 阅读全文

 

, , , , , , ,

初识 Sinatra (三)

文章评分:
在本教程的第二部分,我们利用 DataMapper 将任务保存到后台数据库,同时我们还用 Sinatra 创建了 web 前端以便显示、添加、删除和结束任务。现在这个 Just do it 应用功能齐备,但是样子还有点丑陋。

在本章中,我们继续对这个应用做些美化修饰,并增加一些功能,让你能够创建多个任务列表。

添加样式
现在我们用样式表来对应用进行美化修饰。在你的 “layout.slim” 中添加下面这行代码:

<link rel="stylesheet" media="screen, projection" href="/styles.css">

现在创建一个名为” styles.css”的文件,并保存在”public”文件夹中,将下面 CSS 内容添加到该文件中:

.completed{
  text-decoration: line-through;
  }
.tasks{
  padding:0;
  list-style:none;
  width:400px;
  }
.task{
  position:relative;
  padding:2px 0 2px 28px;
  border-bottom: dotted 1px #ccc;
}
form.update{
  position:absolute;
  bottom:2px;
  left:0;
  }
form.update input{
  background:white;
  color:white;
  padding:0 2px;
  border:solid 1px gray;
  cursor:pointer;
}
.tasks li.completed form.update input{
  color:#47FD6B;
  }
form.delete{
  display:inline;
  }
form.delete input{
  background:none;
  cursor:pointer;
  border:none;
  }

刷新页面,现在页面是不是看起来好多了,也更像一个真正的任务列表了。你也许注意到,该样式表中有个 ‘completed’ 类。 到目前为止,我们显示已完成的任务的方法是为它添加完成的时间,这样看起来不怎么样。我们来修改一下 task 视图,添加 ‘completed’ 类。这样利用样式表,已完成的任务看起来就是完全不同的风格。打开 “task.slim” 做如下修改:

>>> 阅读全文

 

, , , , , ,