学习WebSocket(一)

一:为什么WebSocket

  在传统的互联网通信上,我们一般都是用http协议,客户端向服务器发起请求,服务器作出响应,返回静态资源或对数据库做读写操作等。但这种情况下,服务器是一个被动的角色,不能主动向客户端推送消息。想要达到“推送”的效果,一般只能采用轮询的方式,由客户端按一定时间间隔发起请求,如果数据有更新,则服务器返回新数据,客户端处理新数据并重新渲染。

http虽然简单,但它基于“request--response”这种半双工方式,如果每次传递的数据很小,轮询的开销就显得大了。所以人们试图寻找一种更好的实现服务器端向客户端推送数据的方式。

这时候HTML5定义了WebSocket协议。

WebSocket是一个独立的创建在TCP上的协议,它使用ws或wss的统一资源标志符。使用和HTTP相同的端口号。ws---80,wss--443,通过HTTP/1.1的101状态码进行握手。

它可以发送文本或二进制数据。没有同源限制。

创建websokect链接时,需要客户端先发起请求,然后服务器回应,这个过程称“握手”。

ws://example.com/wsapi
wss://secure.example.com/

二:WebSokect在前端的操作:

我记得刚接触前端的时候,以为ajax是很复杂的东西。但接触后发现,前端的ajax不过是操作XMLHttpRequest对象。我们new了一个XMLHttpRequest对象后,调用它的open()、onreadystatechange()、setRequestHeader()、send()等方法,就能向指定的服务器发起GET/POST请求并设定回调,而其API底层已经帮我们封装了对http操作。

WebSocket也是一样的,我们可以在js中通过new一个WebSocket对象,传入绝对URL,并调用其api来实现基于ws协议的双向连接。

 1 var ws = new WebSocket("wss://echo.websocket.org");
 2 //创建连接成功,可以准备通讯
 3 ws.onopen = function(evt) {
 4   console.log("Connection open ...");
 5   ws.send("Hello WebSockets!");
 6 };
 7 //接收数据
 8 ws.onmessage = function(evt) {
 9   console.log( "Received Message: " + evt.data);
10   ws.close();
11 };
12 //即将关闭连接
13 ws.onclose = function(evt) {
14   console.log("Connection closed.");
15 };   

我们使用ajax时会监听其readyState,当readyState值为4时表示响应已接收并调用回调。

在WebSocket里也有一个常量readyState用来描述 WebSocket 连接的状态。

对应于这几个状态的监听方法有:

WebSocket.onclose()

WebSocket.onerror()

WebSocket.onmessage()

WebSocket.onopen()

Writing WebSocket client applications这篇websocket实践的文章中提到使用websocket时要注意的一些地方:

*当连接发生错误时,一个命名为“error”的事件会发送到WebSocket实例对象上并触发onerror监听函数。随后CloseEvent事件会发送到WebSocket实例对象上并触发onclose回调函数。

*由于发起连接是异步的,所以WebSocket实例对象的send()方法应该放在onopen()的回调中。

*推荐使用json格式传输数据,考虑到在某些版本的火狐浏览器中,websocket只支持发送字符串。

*WebSocket的api都是事件驱动的,所以我们要习惯用回调的方式处理数据的接收:exampleSocket.onmessage = function (event){//do sth...}

 1 // Send text to all users through the server
 2 function sendText() {
 3   // Construct a msg object containing the data the server needs to process the message from the chat client.
 4   var msg = {
 5     type: "message",
 6     text: document.getElementById("text").value,
 7     id:   clientID,
 8     date: Date.now()
 9   };
10
11   // Send the msg object as a JSON-formatted string.
12   exampleSocket.send(JSON.stringify(msg));
13
14   // Blank the text input element, ready to receive the next line of text from the user.
15   document.getElementById("text").value = "";
16 }

三:服务器端的WebSocket

首先看看有哪些支持WebSocket的服务器,这里引用维基百科的资料:

可见,常见的服务器几乎都支持websocket,我自己学的是node,就研究下node中如何实现websocket。

阮一峰老实在其博客中给出了常用的 Node 实现:

那我就试试Socket.IO吧。

//待续

参考:https://zh.wikipedia.org/wiki/WebSocket

WebSocket 教程

时间: 2024-10-10 14:13:01

学习WebSocket(一)的相关文章

学习WebSocket一(WebSocket初识)

Java EE 7 去年刚刚发布了JSR356规范,使得WebSocket的Java API得到了统一,Tomcat从7.0.47开始支持JSR356,这样一来写WebSocket的时候,所用的代码都是可以一样的.今天终于体验了一把Tomcat发布的WebSocket,用着很爽,下面把这一历程分享给大家. 关键词:WebSocket, Tomcat 前提:使用Tomcat7.0.47,Firefox25.0.0.5046 首先Tomcat7.0.47自带WebSocket的示例程序,有两种版本,

学习WebSocket(二):使用Spring WebSocket做一个简单聊天室

聊天室高频率.低延时完全符合websocket的特点,所以聊天室使用websocket再适合不过了. 聊天室的功能并没有比上一节代码多多少,主要在握手阶段对用户的session做处理,对用户的消息进行分发和处理. 握手阶段HandshakeInterceptor需要做的处理 public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor { ......... @Override public boolean b

学习WebSocket(一):Spring WebSocket的简单使用

1.什么是websocket? WebSocket协议定义了一种web应用的新功能,它实现了服务器端和客户端的全双工通信.全双工通信即通信的双方可以同时发送和接收信息 的信息交互方式.它是继Java applets, XMLHttpRequest, Adobe Flash, ActiveXObject等使web应用更具交互性的新技术. 在实现连线过程中,浏览器和服务器通过TCP三次握手建立连接. 如果和服务器连接成功后,浏览器通过HTTP发送握手请求,如果服务器同意握手连接,客户端和服务端之后就

通讯框架 t-io 学习——websocket 部分源码解析

前言 前端时间看了看t-io的websocket部分源码,于是抽时间看了看websocket的握手和他的通讯机制.本篇只是简单记录一下websocket握手部分. WebSocket握手 好多人都用过websocket,不过有的都是在框架之上,只知道连接某个地址,然后调用js API就可以使用websocket了.但是通过阅读t-io的源码才稍微有点明白,服务端到底做了什么.将t-io的websocket demo运行起来之后,我们看一下请求. 可以看到,请求头部分: Connection:Up

WebSocket 学习(三)--用nodejs搭建服务器

前面已经学习了WebSocket API,包括事件.方法和属性.详情:WebSocket(二)--API  WebSocket是基于事件驱动,支持全双工通信.下面通过三个简单例子体验一下. 简单开始 1.安装node.https://nodejs.org/en/ 2.安装ws模块 ws:是nodejs的一个WebSocket库,可以用来创建服务. https://github.com/websockets/ws 3.server.js 在项目里面新建一个server.js,创建服务,指定8181

【HTML5 WebSocket】WebSocket对象特性和方法

<HTML5 WebSocket权威指南>学习笔记&3 WebSocket方法的对象特性 1. WebSocket方法 a. send方法 send方法用于在WebSocket连接建立后,客户端向服务端发送消息.可分为发送两种消息,一种是普通文本信息,一种是二进制数据.需注意的是,send方法必须在连接建立以后才能使用,也就是在onopen里使用才不会出错. 发送普通消息 这个比较简单,在上一篇学习WebSocket事件时就用到了,只需要send(message)即可. 发送二进制数据

websocket+node.js 实时聊天系统问题咨询

1.最近新学习websocket.做了一个实时聊天.用Node.js搭建的服务:serevr.js. 两个相互通信页面:client.html 和server.html 但是就是有很多问题,想让知道的人帮我看看哈: 我先把代码贴出来: server.js:  var ws=require("nodejs-websocket");  console.log("开始建立连接...");  var str1=null,str2=null, clientReady=fals

浅谈HTML5 WebSocket的机制

回顾上一章 在上一章<为什么我们需要HTML5 WebSocket>中,我简单的介绍了下WebSocket的前世今生.相信大家已对WebSocket有了初步的了解.那么今天我们继续深入学习WebSocket的机制. WebSocket机制 我们知道WebSocket是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(不知道的可以看下全双工通信RS-422标准),能更好的节省服务器资源和带宽并达到实时通讯,它建立在TCP之上,同HTTP一样通过TCP来传输数据,但是它和HTTP最大不同是

java WebSocket的实现以及Spring WebSocket

开始学习WebSocket,准备用它来实现一个在页面实时输出log4j的日志以及控制台的日志. 首先知道一些基础信息: java7 开始支持WebSocket,并且只是做了定义,并未实现 tomcat7及以上,jetty 9.1及以上实现了WebSocket,其他容器没有研究 spring 4.0及以上增加了WebSocket的支持 spring 支持STOMP协议的WebSocket通信 WebSocket 作为java的一个扩展,它属于javax包目录下,通常需要手工引入该jar,以tomc