H5新特性websocket
websocket也是html5的新增加内容之一,号称是下一代客户端/服务器异步通信办法，私以为虽然有点吹牛的成分，但是以后说不定能成为异步通信的半壁江山，至于取代ajax，我觉的应该不会。
websocket的一个很有意思的特点就是双向通信，这一点其实也不稀奇，跟socket一样的。
下边是websocket的原理性知识总结是写给我自己看的，如果你没兴趣，可以跳过直接到代码：
tcp建立连接tcp连接的建立需要经历”三次握手“的过程。过程如下client发送SYN包（值为j）以及SEQ包到server端，此时client进入SYN_SEND状态。此为第一次握手。server端收到SYN包后，发送一个ACK（值为seq+1）确认包和SYN（值为k）给client，此时server进入SYN_RECV状态。此为第二次握手。client收到SYN+ACK包后，向server发送一个ACK（值为k+1），该包发送完成后，client和server均进入ESTABLISH状态。此为第三次握手。
client和server两端状态变化如下：
client:
CLOSED->SYN_SEND->ESTABLISH
server:
CLOSED->LISTEN->SYN_RECV->ESTABLISH
tcp是传输层的协议，tcp三次握手后，应用层协议http也便建立了连接。而对于当今web的发展情况，http仍有许多瓶颈。
一条连接只能发送一个请求。
请求只能从客户端开始。客户端不可以接收除响应以外的指令。
请求/响应首部未经压缩发送，首部信息越多延迟越大。
发送冗长的首部。每次互相发送相同的首部造成较多的浪费。
可任意选择数据压缩格式。非强制压缩发送。
虽然已经出现了很多解决方案，如ajax、comet，但是他们最终使用的都是http协议，因此也无法从根本上解决这些瓶颈。
因此也就诞生了一个新的通信协议,WebSocket协议，一种全双工通信协议。
该通信协议建立在http协议的基础之上，因此连接的发起方仍然是客户端，在http连接建立之后，再将协议升级为webSocket连接，在webSocket连接建立之后，客户度和服务器端都可以主动向对方发送报文信息了。
建立webSocket连接，需要先建立http连接，并在此基础上再进行一次”握手“。
client会发起一个”握手“的请求，请求首部含有upgrade:websocket（还有其他首部，具体看如下示例）。服务器端返回一个101状态码，确认转换协议。完成握手后便可以使用websocket协议进行通信。
Client（request）
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: AQIDBAUGBwgJCgsMDQ4PEC==
Origin: http://example.com
Sec-WebSocket-protocol: chat, superchat
Sec-WebSocket-Version: 13server (response)
HTTP/1.1 101 switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Protocol: chat
websocket这个协议涉及前端显示，以及服务器处理，我这里使用基础的java+js来实现一个简单的群聊
package example; import java.io.IOException;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet; import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint; @ServerEndpoint(value="/ws/chat/{nickName}")
public class Chat {
private static final Set<Chat> connections = new CopyOnWriteArraySet<Chat>();
private String nickName; //接收用户名称
private Session session; //建立的会话 public Chat(){ } /*
* 打开连接
*/
@OnOpen
public void onOpen(Session session,@PathParam(value="nickName") String nickName){
this.session=session;
this.nickName=nickName;
connections.add(this);
System.out.println("新用户连接进入,名字是："+this.nickName);
String message=String.format("System>%s %s",this.nickName,"hasjoined.");
Chat.broadCast(message); }
/*
* 关闭连接
*/
@OnClose
public void onClose(){
connections.remove(this);
String message=String.format("System> %s, %s", this.nickName,
" has disconnection.");
Chat.broadCast(message);
} /*
* 接收信息
*/
@OnMessage
public void onMessage(String message,@PathParam(value="nickName")String nickName){
System.out.println("新消息from："+nickName+" : "+message);
Chat.broadCast(nickName+">"+message);
}
/*
* 错误消息
*/
@OnError
public void onError(Throwable throwable){
System.out.println(throwable.getMessage());
}
/*
* 广播消息
*/
private static void broadCast(String message){
for(Chat chat:connections){
try{
synchronized (chat) { //线程同步控制并发访问
chat.session.getBasicRemote().sendText(message);
}
}catch(IOException e){
connections.remove(chat);
try{
chat.session.close(); }catch(IOException e1){
chat.broadCast(String.format("System> %s %s", chat.nickName,
" has bean disconnection."));
}
}
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Testing websockets</title>
</head>
<body>
<div>
<input type="text" id="yourName"/>
<button id="start">click to start</button>
</div>
<div style="width:100%;">
<div id="messages" style="border:5px solid red;width:50%;height:300px;margin-top:20px;"></div>
</div>
<div style="width:100%;margin-top:20px;">
<div id="sends" style="float:left;width:50%;height:50px;margin-right:20px;">
<input type="text" id="MessageUN" style="width:100%;height:48px;"/>
</div>
<button style="float:left;width:10%;height:50px;" id="sendMessage">发送</button>
</div> <script type="text/javascript">
var button=document.getElementById("start");
button.onclick=function(){ var name=document.getElementById("yourName");
console.log(name.value);
var websocketAdd="ws://localhost:8080/t8j8/ws/chat/"+name.value;
var webSocket=new WebSocket(websocketAdd); function onMessage(event) {
document.getElementById('messages').innerHTML
+= '<br />' + event.data;
} function onOpen(event) {
document.getElementById('messages').innerHTML
= 'Connection established';
//一旦链接开始，尝试发出一条通讯消息
start();
alert("消息通道开启，可以发送消息了");
//确认链接开始，就可以开始消息的发送了
//首先绑定一个点击事件
var sendMessage=document.getElementById("sendMessage");
sendMessage.onclick=function(){
var message= document.getElementById('MessageUN').value;
//我们之前会有一个唯一的标识符，就是在click to start之前的标识符
webSocket.send(message);
//上边一部完成之后，会自动触发onmessage事件
} } function start() {
webSocket.send(name.value+" : "+'hello');
} function onError(event) {
alert(event.data);
} webSocket.onerror = function(event) {
onError(event)
}; webSocket.onopen = function(event) {
onOpen(event)
}; webSocket.onmessage = function(event) {
onMessage(event)
}; } </script>
</body>
</html>
重要的只有两个文件：chat.java以及chat.html，实现的是一个微型聊天室，当有用户连接近来和发送消息，所有都能看到。
H5新特性websocket的更多相关文章
- H5新特性-----WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 W ...
- H5新特性汇总
H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...
- H5新特性--WebStorage--WebSocke
今天的目标 3.2:h5新特性--WebStorage localStorage 在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...
- H5新特性---Web Worker---Web Stroage
今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...
- H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位
今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry="" cx="" cy="" ...
- H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图
今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...
- H5新特性-视频,音频-Flash-canvas绘图
json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...
- H5新特性实现对class的增删改
直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...
- Atitti html5 h5 新特性attilax总结
Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...
随机推荐
- 【WPF】分享自用 白板窗口(空窗口) 控件 BlankWindow，基于WindowChrome。
一.背景 吃产品的亏,上设计的当,最后死在变化上. 现在的产品和设计都喜欢在窗口上做一些事,比如让Title做很多事,好像跟人家用一样的窗口很Low似的,好像真的挺Low的. 所以,还不如弄一个黑板似 ...
- Nim教程【十二】
排除指定符号 一般情况下使用import语句,会把一个模块内的符号都导入进来 如果你像排除特定的符号(不想让某些符号被导入进来) 可以使用except子句 就像下面这样 import mymodule ...
- java提高篇(九)-----实现多重继承
多重继承指的是一个类可以同时从多于一个的父类那里继承行为和特征,然而我们知道Java为了保证数据安全,它只允许单继承.有些时候我们会认为如果系统中需要使用多重继承往往都是糟糕的设计,这个时候我们往往需 ...
- 如何成为一个Xamarin专家
近期,我们发布了 Xamarin studio 6,这个版本充满了美妙的新特性,能够更有效的帮助我们的开发工作.由于其深层次的 IDE 比较复杂,同时我们也很难去发现并记得那些对我们最有帮助的特性,所 ...
- knh
市场调研,分析—— 决定是否创业 不要再极度的沉默无言.宅.无存在感,无趣,难熬..
- Atitit vod click event design flow 视频点播系统点击事件文档
Atitit vod click event design flow 视频点播系统点击事件文档 重构规划1 Click cate1 Click mov4 重构规划 事件注册,与事件分发管理器分开 ...
- Atitit.异步的实现模式attilax大总结
Atitit.异步的实现模式attilax大总结 1.1. 函数回调(包括的future模式)1 1.2. 事件机制( 包括定时器 listeners 1 1.3. 中断机制1 1.4. 订阅机制 发 ...
- FreeMarker 学习
一.FreeMarker FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页.电子邮件.配置文件.源代码等)的通用工具. 它不是面向最终用户的,而是 ...
- react2 react 遍历数组
<body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...
- ECMAScript 6 入门
ECMAScript 6 入门 东西真多哇 http://es6.ruanyifeng.com/#docs/module 目录 前言 ECMAScript 6简介 let和const命令 变量的解构赋 ...