js中的WebSocket
一、WebSocket定义:
html5提供的单个TCP连接上进行全双工通信的协议。WebSocket允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
二、WebSocket特点:
- 在实现数据推送时,多数都是ajax轮询(在特定的时间间隔,由浏览器主动发起请求,会占用很多带宽和服务器资源)。而WebSocket建立TCP连接后,服务器可以主动给客户端传递数据,能够更好的节省服务器资源和带宽,实现更实时的数据通讯。
- 因为WebSockets只能通过连接发送纯文本数据和二进制数据,所以对于复杂的数据结构,在通过连接发送之前,必须进行JSON.stringify()序列化。
- 协议标识符是ws(加密则为wss),服务器网址就是 URL。如“ws://localhost:8080"。
三、WebSocket用法:
WebSocket的所有操作都是采用事件的方式触发的,这样不会阻塞UI,使得UI有更快的响应时间和更好的用户体验。
浏览器通过Javascript向服务器发出建立WebSocket连接的请求,连接建立后,客户端和服务器就可以通过TCP连接直接交换数据。当获取WebSocket连接后,可以通过send()方法向服务器发送数据,可以通过onmessage事件接收服务器返回的数据。
实例 |
var ws = new WebSocket(path [,protocols]); path:要连接的 URL,这应该是 WebSocket 服务器将响应的 URL。 protocols(可选):一个协议字符串或者一个包含协议字符串的数组。 |
属性 |
ws.readyState ... |
方法 |
ws.send() ws.close() |
事件 |
ws.onopen ws.onmessage ws.close ws.onerror |
//创建一个webSocket实例,执行后,客户端就会与服务端连接
var ws = new WebSocket("ws://localhost:8080"); //当WebSocket创建成功时,触发onopen事件
ws.onopen = function(){console.log("open");// 复杂的数据结构,在通过连接发送之前,必须进行序列化。 const json = JSON.stringify({type: 'keepalive',id: ''});ws.send(json); //将消息发送到服务端
}//当客户端收到服务端发来的消息时,触发onmessage事件
ws.onmessage = function(e){//e.data 的数据格式也是字符串,手动解析这些数据才能得到其他格式的数据。const _data = JSON.parse(e.data); console.log(e.data,_data);
}//当客户端收到服务端发送的关闭连接请求时,触发onclose事件
ws.onclose = function(e){console.log("close");
}//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
ws.onerror = function(e){console.log(error);
}
四、Http与WebSocket的区别:
http协议是短链接,因为请求之后,都会关闭连接,下次重新请求数据,需要再次打开连接。WebSocket协议是一种长连接,只需要通过一次请求来初始化链接,然后所有的请求和响应都是通过这个TCP链接进行通信。
五、WebSocket和Socket的区别:
Socket是应用层与TCP/IP协议通信的中间软件抽象层,它是一组接口。而WebSocket则不同,它是一个完整的应用层协议,包含一套标准的API。
六、利用socket.io实现简易聊天室思路
参考博文:socket基础知识及js中的Web Sockets_狂野的河的博客-CSDN博客
- 客户端通过发送io.connect(url)连接请求与服务器端进行连接(若不适用socket.io库,使用new WebSocket(url)可以发送连接请求);
- 服务器端通过监听‘connection’事件处理连接请求io.on(‘connection’,function(socket){//发送open事件});
- 客户端通过监听open事件确认是否与服务器端进行连接;
- 客户端通过send方法向服务器端发送信息;
- 服务器端通过监听message方法监听send的发送信息,并处理发送信息(将信息广播给其他聊天室成员和自己);
- 服务器端通过监听disconnect方法判断客户端请求是否断开;
js中的WebSocket相关推荐
- js中使用websocket
后端地址是http的 websocket地址 ws开头:后端地址是https的,websocket地址wss开头: 对于websocket没有跨域的问题 import { MessageBox } ...
- js ws 状态_node.js中ws模块创建服务端和客户端,网页WebSocket客户端
首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...
- node.js中ws模块创建服务端和客户端,网页WebSocket客户端
首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...
- js中简单的使用webSocket
js中简单的使用webSocket 创建websocket对象 websocket事件 websocket方法 实现简单链接 <input type="text" place ...
- HTML5中的websocket图片直播
HTML5中的websocket实现直播 1. videojs-contrib-hls 直播功能 github:https://github.com/videojs/videojs-c ...
- java中websocket_Java中使用webSocket
Java中使用webSocket package com.yaoqi.controller.message; import javax.websocket.*; import javax.websoc ...
- node.js中的框架
node.js中的框架 载自: http://nodeframework.com/ MVC frameworks Sinatra-like These frameworks offer rich co ...
- Tomcat中实现websocket和browser端访问
Tomcat中实现websocket和browser端访问 简介: 在tomcat 7.0.27版本后,实现了对websocket的支持.在最新的tomcat7.0.72后,websocket的开发变 ...
- vue全局安装jquery,vue使用bootstrap框架,vue中封装websocket通讯,vue引入element-ui 组件库,引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
最新文章
- PLsql连接centos7上的Oracle的连接超时的解决方发
- 后端学习 - Java基础
- P1422 小玉家的电费--2022.03.15
- d3 和echart_D3.js与echart.js的应用场景
- 【问答】开放领域问答梳理(2)
- Scikit-learn:模型评估Model evaluation 之绘图
- XML学习总结(一)——XML介绍
- Win11设置人离开后电脑自动锁屏教程
- 每部都是经典 一生不能不看的电影
- 配置Linaro toolchain交叉编译工具
- 企业如何选择?网站建设中常见的几种类型
- 英语发音规则---L字母
- Nginx 实现域名访问以及反向代理
- Exchange 2003 设计与体系结构
- js实现flappybird解析
- Linux的基础存储管理
- 公路多孔箱涵设计_双孔8x3.3米钢筋混凝土箱涵设计套图(19张)
- 韶华易老,昔日往事诚可抛
- Cesium粒子系统-喷水效果
- 北航 计算机学院 讲师 清华大学,楚中毅 中文主页 北京航空航天大学教师个人主页系统...