websocket协议是基于Tcp的一种新的网络协议,它实现了客户端与服务器的双向通行,并允许服务端主动发送信息给客户端。WebSocket是html5中的协议。

Http协议与WebSocket协议:

Http协议只有1.0 和1.1 两个版本,

http协议是无状态的每一请求对应一个响应,而且响应完了就回结束连接,多个请求对应多个响应,每次都要重新建立连接。

在http1.1 中增加了 keep-alive (只是客户端的一种建议) ,用于在一个Http连接中,可以发送多个Request,接收多个Response。但依旧是每隔request对应一个response。

Connection:keep-alive

这个是通知服务器在 request/response 之后,不要理解断开tcp连接,后面的request/response 任然可以通过这个连接完成。但是这个只是个建议,服务端可能不支持,也可能时间长了,断开了连接。(通俗点就根服务端说下 ,后面可能还有事需要找你先不要挂了)

这个是不可能实现服务器主动push消息给客户端的。

那么如何能够实现呢?

But 我们可以使用ajax轮询 和long poll 技术,制造一个服务端push给客户端的假象。

那什么是Ajax轮询?

Ajax 轮询 就是隔几秒让浏览器发送请求询问服务端时候有消息了?

场景:

客户端:hi,有没有新信息(Request)
服务端:没有(Response)
客户端:hi,有没有新信息(Request)
服务端:没有。。(Response)
客户端:hi,有没有新信息(Request)
服务端:没有啊。。(Response)
客户端:hi有没有新消息(Request)
服务端:好了,有啦给你。(Response)
客户端:hi,有没有新消息(Request)
服务端:没有......

But 实际中这样会增加服务端的负载,降低服务端的效率。

什么是long poll 呢?

long poll 和ajax 轮询差不多,不过long poll 是阻塞的模式。也就是客户端发送一个request后 一直等待,知道服务端有消息response后才ok

场景:

客户端:hi,有没有新信息(Request)
服务端:没有(Response)
客户端:hi,有没有新信息(Request)
客户端:hi,有没有新信息(Request)

long pull 虽然降低了服务器的负载,但是需要服务器有很高的并发能力才可以。

ajax轮询、long poll技术虽然都能实现服务端消息的实时通知,但是各有缺点,都不是根本的解决办法。

既然他们都不行,那应该搞个新的协议。

WebSocket协议解决的客户端与服务端的双工通信的问题。

场景:

客户端:啦啦啦,我要建立Websocket协议,需要的服务:chat,Websocket协议版本:13(HTTP Request)
服务端:ok,确认,已升级为Websocket协议(HTTP Protocols Switched)
客户端:麻烦你有信息的时候推送给我噢。。
服务端:ok,有的时候会告诉你的。
服务端:发斯蒂芬
服务端:啊实打实大师
服务端:哈哈哈哈哈啊哈
服务端:笑死我了哈哈哈

  

request header

Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cache-Control: no-cache
Connection: Upgrade #通知服务器协议升级
Cookie: JSESSIONID=450BA8D626F785A1AE3BEB9AC9226CD0
Host: localhost:8099
Origin: http://localhost:8099
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: yjbBHsadoLeWtVNa+3Y2ow== #传输给服务器的key
Sec-WebSocket-Version: 13 #wesocket版本协议号13
Upgrade: websocket #协议升级为websocket协议
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
Sec-WebSocket-Key 这个是客户端发送给服务端,服务端处理后再返回给客户端客户端进行验证 判断是否建立连接。
Connection: Upgrade #通知服务器协议升级
Upgrade: websocket #协议升级为websocket协议
这个就是Websocket的核心了,告诉Apache、Nginx等服务器:注意啦,发起的是Websocket协议,快点帮我找到对应的助理处理~不是HTTP。
Status Code:101 Switching Protocols  101 连接成功

 response Header:

Connection: upgrade #升级成功
Date: Thu, 12 Apr 2018 03:11:37 GMT
Sec-WebSocket-Accept: NbF/mYm1P/lNy0NsMWxYD1Wi1EE= #服务端处理之后的key
Sec-WebSocket-Extensions: permessage-deflate;client_max_window_bits=15
Server: Apache-Coyote/1.1
Upgrade: websocket

握手成功!

简单的代码示例:

jsp 客户端:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
var webSocket = null;
if ('WebSocket' in window) {
webSocket = new WebSocket("ws://localhost:8099/webSocketTest");
} else {
alert("浏览器不支持webSocket");
} webSocket.onopen = function() {
writeDiv("websocket连接ok");
} webSocket.onmessage = function(event) {
writeDiv("client 接受的消息是:" + event.data);
} webSocket.onerror = function() {
writeDiv("发生错误");
} function sendMsg() {
var val = document.getElementById("inputText").value;
webSocket.send(" 客户端:" + val);
} function closes() {
webSocket.close();
} webSocket.onclose = function() {
webSocket.close();
writeDiv("WebSocket連接關閉");
} function writeDiv(innerHTML) {
var html = document.getElementById('message').innerHTML;
document.getElementById('message').innerHTML += innerHTML + '<br>';
}
</script>
<body> <input type="text" id="inputText">
<button id="but" onclick="sendMsg()">submit</button>
<br>
<button id="close" onclick="closes()">关闭webSocket连接</button>
<br>
<div id="message"></div>
</body>
</html>

服务端:

package com.tgb.SpringActivemq.controller;

import java.io.IOException;
import java.util.HashSet;
import java.util.Random;
import java.util.Set; import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint; import org.apache.log4j.Logger; @ServerEndpoint("/webSocketTest")
public class webSocketController { private int count = 0; static Set<Session> set = new HashSet<Session>(); static final Logger logger = Logger.getLogger(webSocketController.class); private Session session; @OnOpen
public void onOpen(Session sessio) {
this.session = sessio;
set.add(session);
this.count++;
logger.info("当前连接:" + this.count);
} // 接受消息 处理
@OnMessage
public void onMessage(String message, Session ss) {
logger.info("接受到的客户端消息是:" + message);
Random r = new Random();
int tet = r.nextInt(1000);
try {
ss.getBasicRemote().sendText("服务端发送的是:" + tet);
} catch (IOException e) {
e.printStackTrace();
}
} @OnError
public void Onerror(Session s, Throwable th) {
logger.info(th.getMessage());
} @OnClose
public void onClose(Session s) {
try {
s.close();
set.remove(s);
this.count--;
logger.info("当前连接数:" + this.count);
logger.info("CLOSE WEBSOCKET");
} catch (IOException e) {
e.printStackTrace();
}
}
}

  

 

webSocket的 原理 及 实现的更多相关文章

  1. WebSocket的原理,以及和Http的关系

    一.WebSocket是HTML5中的协议,支持持久连接:而Http协议不支持持久连接. 首先HTMl5指的是一系列新的API,或者说新规范,新技术.WebSocket是HTML5中新协议.新API. ...

  2. WebSocket的原理,以及和Http的关系 (转载)

    一.WebSocket是HTML5中的协议,支持持久连接:而Http协议不支持持久连接. 首先HTMl5指的是一系列新的API,或者说新规范,新技术.WebSocket是HTML5中新协议.新API. ...

  3. WebSocket协议-原理篇

    本篇文章主要讲述以下几点: WebSocket的原理与机制 WebSocket与Socket.io WebSocket兼容性 WebSocket的原理与机制 WebSocket协议分为两部分:握手和数 ...

  4. nginx支持websocket及websocket部分原理介绍

    nginx支持websocket及websocket部分原理介绍最近ipc通过websocket与server进行通行,经过无法通过nginx进行反向代理,只有直连nodejs端口.而且部署到阿里云用 ...

  5. Websocket(一)——原理及基本属性和方法

    初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处? 答案很简单,因为 HTTP 协议有一个缺陷:通信只能由客户端发起. 举例 ...

  6. WebSocket的原理与优缺点

    websocket 是长连接,受网络限制比较大,需要处理好重连,比如用户进电梯或电信用户打个电话网断了,这时候就需要重连,如果 ws 一直重连不上,有些较复杂的业务方会不愿意的,是不是还要搞个 htt ...

  7. (转)WebSocket的原理

    前言:无聊逛知乎,就逛到H5的栏目去了,正好看到了关于Websocket的东西.个人是比较喜欢看这类风格的,转到博客分享,以便自己以后理解. ---------------------分割线----- ...

  8. 分析HTML5中WebSocket的原理

    目录结构   一.什么是Websocket websocket是html5提出的一个协议规范,参考rfc6455. 不过目前还都是在草案,没有成为标准,毕竟html5还在路上. websocket约定 ...

  9. 一文带你看懂WebSocket 的原理?为什么可以实现持久连接?

    工作之余在知乎上偶然看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇让我对 websocket 的认知深刻易懂,之前看总完总觉得一知半解云里雾里.所以与大家共同分享一下一起学习.比较喜欢这种博客理 ...

  10. 【计算机网络】WebSocket实现原理分析

    1.介绍一下websocket和通信过程? 1.1 基本概念 [!NOTE] Websocket是应用层第七层上的一个应用层协议,它必须依赖 HTTP 协议进行一次握手 ,握手成功后,数据就直接从 T ...

随机推荐

  1. 在IIS中如何配置SSL(https)

    1.打开IIS管理界面>“服务器证书”>“创建自签名证书”>输入名称>点“完成” 2.在“网站”上右键“添加网站”,在“绑定”的“类型”中选择“Https”,在“SSL证书&q ...

  2. NetSec2019 20165327 Exp2 后门原理与实践

    NetSec2019 20165327 Exp2 后门原理与实践 快速找到重点: (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用socat获取主机操作Shell, ...

  3. 【转载】阻塞队列之三:SynchronousQueue同步队列 阻塞算法的3种实现

    一.SynchronousQueue简介 Java 6的并发编程包中的SynchronousQueue是一个没有数据缓冲的BlockingQueue,生产者线程对其的插入操作put必须等待消费者的移除 ...

  4. mybatis-generator自动生成Mapper.dao.entity

    在pom.xml中添加依赖 <plugin> <groupId>org.mybatis.generator</groupId> <artifactId> ...

  5. cowboy源码分析(三)

    上接 cowboy源码分析(二) 我们接着分析cowboy_protocol.erl的request/7模块 -module(cowboy_protocol). %% API.-export([sta ...

  6. Java语言中的奇淫技巧

    variable length parameter list(可变长度参数列表) 很久之前了解过有这么一种写法,但转眼即忘.今天在公司项目的代码里看到,有点小惊讶,写这代码的同事还是有点水平的...

  7. Genymotion下载及安装

    引用https://blog.csdn.net/yht2004123/article/details/80146989 一.注册\登录 打开Genymotion官网,https://www.genym ...

  8. echarts-五分钟的教程

    https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

  9. 开个小灶——turtle 海龟图形

    turtle 海龟图形 turtle数据库是python语言中最流行的绘制函数图形的数据库,绘制笔头像个小海龟,因此一般称为 海龟图形.海龟数据库的导入   import turtle 1 画布大小设 ...

  10. Tsinghua 2018 DSA PA2简要题解

    反正没时间写,先把简要题解(嘴巴A题)都给他写了记录一下. upd:任务倒是完成了,我也自闭了. CST2018 2-1 Meteorites: 乘法版的石子合并,堆 + 高精度. 写起来有点烦貌似. ...