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. 
						
  2. H5新特性汇总
		
    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和  ...
    
		
    3. 
						
  3. H5新特性--WebStorage--WebSocke
		
    今天的目标 3.2:h5新特性--WebStorage localStorage  在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...
    
		
    4. 
						
  4. H5新特性---Web Worker---Web Stroage
		
    今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...
    
		
    5. 
						
  5. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位
		
    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...
    
		
    6. 
						
  6. H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图
		
    今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...
    
		
    7. 
						
  7. H5新特性-视频,音频-Flash-canvas绘图
		
    json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...
    
		
    8. 
						
  8. H5新特性实现对class的增删改
		
    直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...
    
		
    9. 
						
  9. Atitti html5 h5 新特性attilax总结
		
    Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【Win10 UWP】URI Scheme（一）：Windows Store协议的解析和使用
			
    协议是Windows Phone和Windows Store应用的一个重要特点,可以做到在不同应用之间进行互相呼起调用.小小协议,学问大着呢.我打算写几篇关于协议在UWP中使用的文章. 这一讲的主要对 ...
    
			
    2. 
						
  2. EQueue - 详细谈一下消息持久化以及消息堆积的设计
			
    前言 之前写了一篇文章,总体介绍了EQueue.在看这篇文章之前如果还没看过那篇文章,可能会看不懂这篇文章.所以建议没看过的朋友务必先看一下那篇文章中所提到的各种概念,这样才能更好的理解本文所说的内容 ...
    
			
    3. 
						
  3. [C#进阶系列]专题二：你知道Dictionary查找速度为什么快吗？
			
    一.前言 在之前有一次面试中,被问到你了解Dictionary的内部实现机制吗?当时只是简单的了问答了:Dictionary的内部结构是哈希表,从而可以快速进行查找.但是对于更深一步了解就不清楚了.所 ...
    
			
    4. 
						
  4. Web Essentials之Markdown和自定义编辑器(Web Essentials完结)
			
    返回Web Essentials功能目录 本篇目录 功能 自定义编辑器 开源项目都会在项目的根目录放一个Readme.md文件来告诉读者一些重要的说明,那么就可以在VS中直接编辑Markdown文件. ...
    
			
    5. 
						
  5. PostgreSQL基础整理（二）
			
    存储过程 实现功能:针对工资表30岁以下,工资提升10% 30至40提升20% 40以上提升30% + 奖金(入参)返回平均薪酬 创建表: DROP TABLE emps; CREATE TABLE  ...
    
			
    6. 
						
  6. [蓝牙] 6、基于nRF51822的蓝牙心率计工程消息流Log分析（详细）
			
    开机初始化Log Log编号 函数名   所在文件名 000001: main ..\main.c 000002: timers_init ..\main.c 000003: gpiote_init  ...
    
			
    7. 
						
  7. [安卓] 16、ListView和GridView结合显示单元实现自定义列表显示效果
			
    List在各种手机应用中都有体现,是安卓UI设计的必修课. 本文将介绍在开发中如何利用ListView和GridView设计自定义列表. 下面分别是用ListView和GridView做的效果: 上面 ...
    
			
    8. 
						
  8. 用DirectX实现魔方（一）
			
    关于魔方 魔方英文名字叫做Rubik's Cube,是由匈牙利建筑学教授和雕塑家Ernő Rubik于1974年发明,最初叫做Magic Cube(这大概也是中文名字的来历吧),1980年Ideal  ...
    
			
    9. 
						
  9. 了解一下JavaScript的未来——ECMAScript5
			
    神马是EcmaScript5 首先得先搞清楚ECMAScript是神马,我们知道JavaScript或者说LiveScript最开始是Netscape搞出来的,后来微软也跟进搞出了Jscript,Sc ...
    
			
    10. 
						
  10. IOS UIView 04- 自定义控件
			
    注:本人是翻译过来,并且加上本人的一点见解. 前言 本文将讨论一些自定义视图.控件的诀窍和技巧.我们先概述一下 UIKit 向我们提供的控件,并介绍一些渲染技巧.随后我们会深入到视图和其所有者之间的通 ...
    
			
    11.