WebSocket的使用

先来介绍一下webScoket,其实开始我也不知道是啥,所以搜了一下:

WebSocket protocol 是HTML5一种新的协议。它是实现了浏览器与服务器全双工通信(full-duplex)。

现很多网站为了实现即时通讯,所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的数据可能只是一个很小的值,这样会占用很多的带宽。

而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信,但依然需要发出请求。

在 WebSocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即时服务带来了两大好处:

1. Header

互相沟通的Header是很小的-大概只有 2 Bytes

2. Server Push

服务器可以主动传送数据给客户端

做webSocket是由于项目需求,要求界面动态显示实时数据,但是又不可能一秒就给服务器发送一个,这个太不切实际了,于是有了webSocket。虽然后来可以但是中间遇到了很多的问题,查资料的时候还发现ie到10的版本才支持,真是人艰不拆啊~~~

function start() {  //---2:到了这里

var wsImpl = window.WebSocket||window.MozWebSocket;  //这应该是定义好的

window.ws = new wsImpl(‘ws://192.168.11.11:8180/‘);    //这里是服务器地址

ws.binaryType = "arraybuffer";

ws.onmessage = function(evt) {    //---6:这里就是用来接受数据的,想要怎么处理就是自己的事啦

var mess = evt.data;

//对于数据的处理一是看服务器传过来的是什么数据;二是看你需要什么样式的数据

}

};

ws.onopen = function() {   //---3.1:打开服务器,并连接成功

$.ajax({     //---4:这里我是用来第一次想服务器发送请求的内容

type:‘POST‘,

url:ctx+‘/do/xx/xx/xxx‘,

async : false,

data:{

xx:xx

},

dataType:‘text‘,

success:function(data){

ws.send(data);     //-----5:获取到ajax的内容之后,就可以将其发送给服务器,就是这个send的啦

}

});

};

ws.onclose = function() {    //---3.2:到了这里应该是服务器关闭了

$.messager.alert(‘Warning‘,‘服务器已经关闭了~‘);

};

ws.onerror = function() {   //---3.3连接出现问题了,关闭也是错误哦~

$.messager.alert(‘error‘,‘出现错误,请重试~‘);

};

};

$(function(){

start(); //---1:开始

});

时间: 2024-10-12 20:21:03

WebSocket的使用的相关文章

web新特性 之 WebSocket

详情参见:你真的了解WebSocket吗?     WebSocket系列教程   HTML5新特性之WebSocket WebSocket协议是基于TCP的一种新的协议.WebSocket最初在HTML5规范中被引用为TCP连接,作为基于TCP的套接字API的占位符.它实现了浏览器与服务器全双工(full-duplex)通信.其本质是保持TCP连接,在浏览器和服务端通过Socket进行通信. 服务端与客户端的连接不断开,实现全双工的操作.及服务端或是客户端都会给对方发送消息. WebSocke

websocket之拨云见雾

websocket是基于http相应的特性弥补其不足(就是个socket,不再是一次请求一次相应) 但缺点就是只有在版本较高的浏览器才支持websocket. 浏览器: <script type="text/javascript"> var socket = new WebSocket("ws://127.0.0.1:8002/xxoo"); ... </script> 服务端: import socket sock = socket.soc

websocket

什么是websocket? 不错的介绍:https://www.zhihu.com/question/20215561 websocket是一种持久化的协议,实现了浏览器和服务端的全双工通信: 握手阶段与HTTP协议相同,返回状态码101(switching protocols): 握手阶段完成之后,按照websocket协议进行通信 应用场景: 浏览器与服务端需要实时通信的场景,以前的解决方式:ajax轮询.HTTP长连接.Flash等. 实现: 浏览器端 const ws = new Web

websocket链接数限制

无法解决 当我需要每跳转新打开一个页面链接一次websocket的时候,第六个开始loading,关掉前面的,会加载出来,查了查.... 由于websocket属于属于持久链接 不同的浏览器针对同一服务器的持久链接的数量限制如下: chrome  6 firefox  6 Safari 5 IE11以下 不支持 这种H5的新新技术不得不说有各种安全和兼容性问题,慎重选用

java SSM框架 多数据源 代码生成器 websocket即时通讯 shiro redis 后台框架源码

获取[下载地址]   QQ: 313596790官网 http://www.fhadmin.org/A 调用摄像头拍照,自定义裁剪编辑头像,头像图片色度调节B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,快速开发利器)+快速表单构建器 freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,service等完整模块C 集成阿里巴巴数据库连接池druid  数据库连接池  阿里巴巴的 druid.Druid在监控.可扩展性.稳定性和性能方面都

异步通信----WebSocket

什么是WebSocket? WebSocket API是下一代客户端-服务器的异步通信方法.该通信取代了单个的TCP套接字,使用ws或wss协议,可用于任意的客户端和服务器程序.WebSocket目前由W3C进行标准化.WebSocket已经受到Firefox 4.Chrome 4.Opera 10.70以及Safari 5等浏览器的支持. WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息.WebSocket并不限于以Ajax(或XHR)方式通

QDjango,tufao,C++ websocket client/server

QDjango, a Qt-based C++ web frameworkhttps://github.com/jlaine/qdjango/ An asynchronous web framework for C++ built on top of Qt http://vinipsmaker.github.io/tufao/https://github.com/vinipsmaker/tufao C++ websocket client/server library http://www.za

PHP基于websocket实时通信的实现—GoEasy

PHP websocket实时消息推送 实现步骤如下: 1. 获取 GoEasy appkey. 在 goeasy 官网上注册一个账号,并新建一个 app. APP 创建好后系统会为该 app 自动生成两个 key, 一个既可以用来接收又可以用来推送 (supper key),另一个只可以用来接收(subscriber key). 2. 客户端订阅一个 channel. a. 在客户端引入 goeasy.js , js 地址: http://cdn.goeasy.io/goeasy.js 需要注

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 实现方案对比 举个

认识HTML5的WebSocket

认识HTML5的WebSocket 在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法,从客户端使用简单的语法有效地推动消息到服务器.让我们看一看HTML5的WebSocket API:它可用于客户端.服务器端.而且有一个优秀的第三方API,名为Socket.IO. 一.什么是WebSocket API? WebSocket API是下一代客户端-