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.占位 ...
随机推荐
- [Xamarin] 動態載入Fragment (转帖)
這篇我們來動態加入,一樣務求好懂簡單 1.一樣先將專案調整成3.0以上版本 2.首先建立自定Control的Layout \Resources\Layout\MyControlLayout1.axml ...
- 图解集合2：LinkedList
初识LinkedList 上一篇中讲解了ArrayList,本篇文章讲解一下LinkedList的实现. LinkedList是基于链表实现的,所以先讲解一下什么是链表.链表原先是C/C++的概念,是 ...
- Java多线程1：进程与线程概述
进程和线程 谈到多线程,就得先讲进程和线程的概念. 进程 进程可以理解为受操作系统管理的基本运行单元.360浏览器是一个进程.WPS也是一个进程,正在操作系统中运行的".exe"都 ...
- Entity Framework 5.0系列之EF概览
概述 在开发面向数据的软件时我们常常为了解决业务问题实体.关系和逻辑构建模型而费尽心机,ORM的产生为我们提供了一种优雅的解决方案.ADO.NET Entity Framework是.NET开发中一种 ...
- [.net 面向对象编程基础] (17) 数组与集合
[.net 面向对象编程基础] (17) 数组与集合 学习了前面的C#三大特性,及接口,抽象类这些相对抽象的东西以后,是不是有点很累的感觉.具体的东西总是容易理解,因此我们在介绍前面抽象概念的时候,总 ...
- Java提高篇（三八）-----Java集合细节（四）：保持compareTo和equals同步
在Java中我们常使用Comparable接口来实现排序,其中compareTo是实现该接口方法.我们知道compareTo返回0表示两个对象相等,返回正数表示大于,返回负数表示小于.同时我们也知道e ...
- html5 Application Cache——加快简历二次访问速度
上篇博客(在github上写个人简历——最简单却又不容易的内容罗列)介绍了我在github上放的一个个人在线简历,有朋友看了后告诉我一个很大缺陷,使用github挺慢的,每次看的时候都很慢,第一反应这 ...
- MVC5：使用Ajax和HTML5实现文件上传功能
引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...
- 内存角度探寻C++面向对象 之 继承、多态
一,简单继承: #include <iostream> class TableTennisPlayer { private: int id; public: TableTennisPlay ...
- write/wall 1
linux:/opt/software/lktest/c # wallhellllllllllllllllllllooooooooooooooooo^[[AasZZZZZZ^Clinux:/opt/s ...