websocket实战(1) 入门

简介:

1.WebSocket介绍

1.1 概念

WebSocket是HTML5中一系列新的API,或者说新规范,新技术。支持页面上使用Web Socket协议与远程主机进行全双工的通信。它引入了WebSocket接口并且定义了一个全双工的通信通道,通过一个单一的套接字在Web上进行操作。

1.2 websocket vs HTTP

首先,web技术发展经历了以下阶段。

  • 静态页面(html)

  • 动态页面(cgi,j2ee,php...)

  • Ajax技术

  • comet技术(轮询)

1.2.1 实现方案对比

举个简单的例子,以51cto的消息推送为例。

wKioL1fj2ZegVnmrAAAbVI4ZPto807.png

下面,就用提到的技术实现这个小小的功能,分析下利弊。

  1. 静态页面就不说了,它一般应用在页面缓存级别,但消息条目明显有一定时效的,不适用该场景。

  2. 动态页面,为了更新消息数目,刷新整个页面,下面所有的页面重新渲染,效率也不加。

  3. ajax技术,可以实现局部页面刷新,通过HTTP轮询,获取消息条目。即使没有新消息,也必须发送请求,产生无意义的请求。请求间隔太长,实时性存在问题;间隔太端,浪费服务器资源和占用带宽。

  4. comet技术,基于HTTP长连接,是反向Ajax(Reverse Ajax)一种实现,能够从服务器端向客户端发送数据,实现了连接的复用。 两种实现方式各有利弊。(1)基于Ajax的长轮询(long-polling)方式;(2)基于 Iframe 及 htmlfile 的流(http streaming)方式。

websocket实现方案

与http协议不同的请求/响应模式不同,HTML5 Web Sockets以最小的开销高效地提供了Web连接 ,极大的减少了不必要的网络流量与延迟。一个Web客户端通过websocket连接到一个远程端点,进行全双工的通信,提高了实时性,不存在浪费服务资源问题。

1.2.2 websocket 与http关系

两者都是应用层的开发规范,websocket是基于http的,Websocket其实是一个新协议,跟HTTP协议基本没有关系,只是为了兼容现有浏览器的握手规范而已。

http支持长连接;但websocket是持久连接。

1.3 websocket场景

1.社交订阅

2.多玩家游戏

3.协同编辑/编程

4.点击流数据

5.股票基金报价

6.体育实况更新
7.多媒体聊天
8.基于位置的应用

9.在线教育

2. 我的websocket 项目

项目还在不断完善之中。里面包含了若干个websocket例子。例子,包括游戏类,聊天类,画板类....

本人,比较喜欢学一门技术的原则“无论如何先跑起来”,搜集这些例子,花费了个人近3天时间。

希望对大家有用。

项目地址:https://github.com/janecms/websocket_example

wKiom1fj45qhDh3sAAB9sxuFA_I364.png

3. 声明服务端websocket服务(Endpoint)的两种方式

最主要的内容就是声明EndPoint。

创建服务端步骤

  1. Create an endpoint class.

  2. Implement the lifecycle methods of the endpoint.

  3. Add your business logic to the endpoint.

  4. Deploy the endpoint inside a web application.

3.1编程式

wKiom1fj6lexCyNMAAASjmxStS8245.png

Endpoint中的onOpen,onClose,onError对应websocket的生命周期。

wKioL1fj6sGTA5iQAABKQnIo85Y518.png

1.创建Endpoint

1
2
3
4
5
6
7
8
9
10
11
12
13
public  class  EchoEndpoint  extends  Endpoint {
    @Override
    public  void  onOpen( final  Session session, EndpointConfig config) {
       session.addMessageHandler( new  MessageHandler.Whole<String>() {
          @Override
          public  void  onMessage(String msg) {
             try  {
                session.getBasicRemote().sendText(msg);
             catch  (IOException e) { ... }
          }
       });
    }
}

2.部署endpoint

1
ServerEndpointConfig.Builder.create(EchoEndpoint. class "/echo" ).build();

具体参见:

https://github.com/janecms/websocket_example中的<websocket.echo.EchoEndpoint>.

3.2 注解声明式

更简单。

1
2
3
4
5
6
7
8
9
@ServerEndpoint ( "/echo" )
public  class  EchoEndpoint {
    @OnMessage
    public  void  onMessage(Session session, String msg) {
       try  {
          session.getBasicRemote().sendText(msg);
       catch  (IOException e) { ... }
    }
}

具体参见

https://github.com/janecms/websocket_example中的<websocket.echo.EchoAnnotation>.

相关annotation说明

wKioL1fj64uCtxLcAAB4ES7wn0A654.png

Each websocket endpoint may only have one message handling method for each of the native websocket
message formats: text, binary and pong
 

一个endpoint只能有一个被@OnMessage修饰的处理文本,二进制,pone信息的的方法。这个限制,不同的环境,会有所区别。

4.html5 websocket 实现客户端

客户端,也对应生命周期。onOpen,onClose,onMessage,onError。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var  wsocket;
function  connect() {
    wsocket =  new  WebSocket( "ws://localhost:8080/dukeetf2/dukeetf" );
    wsocket.onmessage = onMessage; //定义回调
     websocket.onerror =  function (evt) {
         onError(evt)
     };   
}
function  onMessage(evt) {
    var  arraypv = evt.data.split( "/" );
    document.getElementById( "price" ).innerHTML = arraypv[0];
    document.getElementById( "volume" ).innerHTML = arraypv[1];
}
...
window.addEventListener( "load" , connect,  false );

5. websocket协议交互数据

和标准HTTP,存在很大不同。

5.1 请求数据

1
2
3
4
5
6
7
GET  /path/to/websocket/endpoint  HTTP /1 .1
Host: localhost
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: xqBt3ImNzJbYqRINxEFlkg==
Origin: http: //localhost
Sec-WebSocket-Version: 13

5.2 响应数据

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: K7DJLdLooIwIG/MOpvWFB3y3FE8=

5.3 websocket的请求URL,也不是标准http schema。

普通:ws://host:port/path?query

加密:wss://host:port/path?query




本文转自 randy_shandong 51CTO博客,原文链接:http://blog.51cto.com/dba10g/1855634,如需转载请自行联系原作者

相关文章
|
2月前
|
前端开发 JavaScript Python
Python Web应用中的WebSocket实战:前后端分离时代的实时数据交换
在前后端分离的Web应用开发模式中,如何实现前后端之间的实时数据交换成为了一个重要议题。传统的轮询或长轮询方式在实时性、资源消耗和服务器压力方面存在明显不足,而WebSocket技术的出现则为这一问题提供了优雅的解决方案。本文将通过实战案例,详细介绍如何在Python Web应用中运用WebSocket技术,实现前后端之间的实时数据交换。
92 0
|
5月前
|
监控 前端开发 API
实战指南:使用Python Flask与WebSocket实现高效的前后端分离实时系统
【7月更文挑战第18天】构建实时Web应用,如聊天室,可借助Python的Flask和WebSocket。安装Flask及Flask-SocketIO库,创建Flask应用,处理WebSocket事件。前端模板通过Socket.IO库连接服务器,发送和接收消息。运行应用,实现实时通信。此示例展现了Flask结合WebSocket实现前后端实时交互的能力。
545 3
|
2月前
|
网络协议 前端开发 JavaScript
WebSocket 教程汇总指南,从入门到熟练
本文将带你从零开始,逐步掌握 WebSocket 的基本概念、实现方法和应用场景,通过一系列详细的教程和实践案例,帮助你从入门到熟练地使用 WebSocket 技术。无论你是初学者还是有一定经验的开发者,本文都能为你提供有价值的信息和指导。
|
6月前
|
JavaScript 网络协议 前端开发
【Nodejs】WebSocket 全面解析+实战演练——(Nodejs实现简易聊天室)
【Nodejs】WebSocket 全面解析+实战演练——(Nodejs实现简易聊天室)
600 0
|
2月前
|
网络协议 安全 JavaScript
Web实时通信的学习之旅:WebSocket入门指南及示例演示
Web实时通信的学习之旅:WebSocket入门指南及示例演示
180 0
|
4月前
|
前端开发 网络协议 物联网
Django Web:搭建Websocket服务器(入门篇)
Django Web:搭建Websocket服务器(入门篇)
84 1
|
5月前
|
前端开发 JavaScript UED
Python Web应用中的WebSocket实战:前后端分离时代的实时数据交换
【7月更文挑战第16天】在前后端分离的Web开发中,WebSocket解决了实时数据交换的问题。使用Python的Flask和Flask-SocketIO库,后端创建WebSocket服务,监听并广播消息。前端HTML通过JavaScript连接到服务器,发送并显示接收到的消息。WebSocket适用于实时通知、在线游戏等场景,提升应用的实时性和用户体验。通过实战案例,展示了如何实现这一功能。
320 2
|
4月前
|
网络协议 前端开发 Go
[go笔记]websocket入门
[go笔记]websocket入门
|
7月前
|
小程序 Java 编译器
性能工具之JMeter 微信小程序 WebSocket 脚本入门
【5月更文挑战第12天】性能工具之JMeter 微信小程序 WebSocket 脚本入门
220 1
|
存储 数据安全/隐私保护
Netty实战(十三)WebSocket协议(一)
WebSocket 协议是完全重新设计的协议,旨在为 Web 上的双向数据传输问题提供一个切实可行的解决方案,使得客户端和服务器之间可以在任意时刻传输消息,因此,这也就要求它们异步地处理消息回执。
315 0