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: 13

server (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的更多相关文章

  1. H5新特性-----WebSocket

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 W ...

  2. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

  3. H5新特性--WebStorage--WebSocke

    今天的目标 3.2:h5新特性--WebStorage localStorage  在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...

  4. H5新特性---Web Worker---Web Stroage

    今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...

  5. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

  6. H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图

    今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...

  7. H5新特性-视频,音频-Flash-canvas绘图

    json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...

  8. H5新特性实现对class的增删改

    直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...

  9. Atitti html5 h5 新特性attilax总结

    Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...

随机推荐

  1. Yii2中的零碎知识点

    PHP最佳实践 1 PHP获取时间戳:echo  time(); 时间戳转换 date('Y-m-d H:i:s', $时间戳); 2 linux 显示命令 ls 显示所有文件夹 查看命令:tail ...

  2. MongoDB分片之数据分割方式

    随着移动互联网的发展,大量的非结构化数据随之产生,不仅对数据库存储大数据提出了新的要求,同时对于查询数据和进行大数据分析也提出了苛刻的要求,这些显然是单服务器处理能力无法满足的,自然建立一个集群是不可 ...

  3. FusionCharts教程文档下载

    FusionCharts是一个Flash的图表组件,它可以用来制作数据动画图表,其中动画效果用的是Adobe Flash 8 (原Macromedia Flash的)制作的flash , Fusion ...

  4. [每日电路图] 8、三轴加速度计LIS3DH电路图及功耗等指标

    看TI的官网资料:http://www.st.com/web/en/catalog/sense_power/FM89/SC444/PF250725 一.初次接触关注的信息: 1.1.概述中的关键信息 ...

  5. XSS危害——session劫持

    在跨站脚本攻击XSS中简单介绍了XSS的原理及一个利用XSS盗取存在cookie中用户名和密码的小例子,有些同学看了后会说这有什么大不了的,哪里有人会明文往cookie里存用户名和密码.今天我们就介绍 ...

  6. 建立 svn 服务端

    上一篇文章 (SVN 使用)是针对于客户端,本文是说明如何在本地设置服务端 1,建立服务端站点 svnadmin create /Users/hour/Desktop/svn 2,终端进入svn 里的 ...

  7. Java和eclipxe的安装以及第一个程序

    首先我们需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 注意事项:安装 ...

  8. Linux初学 - 解决chkconfig Segmentation fault(core dumped)

    yum install *chkconfig*

  9. fir.im Weekly - iOS/Android 应用程序架构解析

    假如问你一个iOS or Android app的架构,你会从哪些方面来说呢? 本期 fir.im Weekly 收集了关于  iOS/Android 开发资源,也加入了一些关于 Web 前端方面的分 ...

  10. DOM_03之元素及常用对象

    1.修改样式:访问内联样式:elem.style.css属性名:获得其他:var style=getComputerStyle(elem):*(* 获得焦点onfocus:失去焦点onblur:): ...