html5 堂,HTML5之webSocket使用

webSocket是什么

webSocket是HTML5新出的一种协议，底层是基于TCP/IP协议的。跟http没有关系，只是复用了http握手通道，用来升级协议。

webSocket的作用

轮询：客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。缺点：

浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

长轮询：浏览器向服务器发送请求，服务器将请求保持打开一段时间。如果在该时间段内收到通知，则将包含该消息的响应发送到客户端。如果在设定的时间段内未收到通知，则服务器发送响应以终止打开的请求。缺点：

当具有较高的消息量时，长轮询不会提供比传统轮询更大的性能改进

服务器端会阻塞请求直到有数据传递或超时才返回

使用webSocket浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

优点：

能更好的节省服务器资源和带宽

支持双向通信，实时性更强

可以发送文本，也可以发送二进制数据

webSocket的使用

服务端：

var app = require('express')();var WebSocket = require('ws');var wss = new WebSocket.Server({ port: 8080});

wss.on('connection', functionconnection(ws) {

ws.on('message', functionincoming(message) {

console.log(message);

});

ws.send('the content from server');

});

app.listen(3000,() =>{

console.log('you are listening port 3000');

});

客户端：

var ws = new WebSocket('ws://localhost:8080');

ws.onopen= function() {

ws.send('the request from client');

};

ws.onmessage= function(e) {

console.log('from server: ' +e.data);

};

webSocket应用场景

社交聊天、弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、基于位置的应用、在线教育、智能家居等需要高实时的场景

html5 堂,HTML5之webSocket使用相关推荐

HTML5协议的,HTML5新增协议：WebSocket协议的实例
本篇文章给大家带来的内容是关于HTML5新增协议:WebSocket协议的实例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. WebSocket 是 HTML 5 新增的协议,基于 ...
[html] HTML5的Server-Sent和WebSocket有什么区别？
[html] HTML5的Server-Sent和WebSocket有什么区别? websocket是双向通信,server-sent只能服务端发送消息个人简介我是歌谣,欢迎和大家一起交流前后端知 ...
[html] HTML5的Server-Sent和WebSocket如何选择哪一个？
[html] HTML5的Server-Sent和WebSocket如何选择哪一个? 看具体的业务场景个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
兄弟连html5在线画板,IT兄弟连 HTML5教程 HTML5做到了与之前版本的兼容
原标题:IT兄弟连 HTML5教程 HTML5做到了与之前版本的兼容为了保证HTML5能与之前的HTML版本达到最大的兼容,HTML5对一些元素标记的省略.boolean值的属性,以及引号的省略这几 ...
对html5的了解,HTML5——对HTML5的认识
首先非常感谢李刚老师出的这本书<HTML5/CSS3/JavaScript讲义>,今天读了第一章节的内容,趁热打铁,总结一下. HTML5的时代已经到来,它对所有的前端开发人员来说是一种福 ...
html5发展前景-兄弟连,IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生
原标题:IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生十年磨一剑,正如我们所看到的一样,HTML5大潮正来势汹汹.但也正如我们所知道的一样,HTML5是一种技术标准,它的语义 ...
下列关于html5表单的多样输入方式,IT兄弟连 HTML5教程 HTML5表单多样的输入类型1...
原标题:IT兄弟连 HTML5教程 HTML5表单多样的输入类型1 HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证.并不是所有的主浏览器都支持新的input类型,不过我们可 ...
这不仅仅是html5的HTML5问题
这不仅仅是html5的HTML5问题,它还关系到了我们应该如何工作这类原则性的问题,css working group更青睐于使用www-风格的输入.因为目标人群是web开发者,所以lea并不担心向后 ...
css html5简介,HTML5 简介......
HTML5 示例实例 Your browser does not support the video tag. 什么是 HTML5? HTML5 简介 HTML5 是最新的 HTML 标准. HTM ...

html5 堂,HTML5之webSocket使用

html5 堂,HTML5之webSocket使用相关推荐

最新文章

热门文章