您当前的位置:首页 > 电脑百科 > 站长技术 > 服务器

WebSocket的基本使用

时间:2020-01-09 11:32:07  来源:  作者:

WebSocket的基本使用

 

第一部分 介绍

HTTP的缺点在于通信只能由客户端发起,如果服务器有连续的状态变化,客户端要获知就非常的麻烦,只能够使用轮训的方法,很消耗服务器资源。

WebSocket很好的解决了HTTP的这个缺点,它的特点是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,属于服务器推送技术的一种。

特点有 :

  • 数据格式轻量,性能开销小,通信高校。
  • 可以发送文本或二进制数据。
  • 没有同源限制,客户端可以与任意服务器通讯。
  • 协议标识是ws,如果加密就是wss,服务器网址就是url。
  • 默认端口也是80和443,握手阶段采用HTTP协议,能通过各种HTTP代理服务器。
ws://example.com:80/some/path

第二部分 客户端示例

var ws = new WebSocket("wss://echo.websocket.org");ws.onopen = function(evt) {   console.log("Connection open ...");   ws.send("Hello WebSockets!");};ws.onmessage = function(evt) {  console.log( "Received Message: " + evt.data);  ws.close();};ws.onclose = function(evt) {  console.log("Connection closed.");};

第三部分 客户端API

 

  1. WebSocket构造函数var ws = new WebSocket('ws://localhost:8080');

2.WebSocket.readyState 返回示例对象的当前状态,有四种

CONNECTING:值为0,表示正在连接。
OPEN:值为1,表示连接成功,可以通信了。
CLOSING:值为2,表示连接正在关闭。
CLOSED:值为3,表示连接已经关闭,或者打开连接失败。

3.WebSocket.onopen 实例对象的onopen属性,用于指定连接成功后的回调函数

ws.onopen = function () {  ws.send('Hello Server!');}

WebSocket.onclose 实例对象的onclose属性,用于指定连接关闭后的回调函数

ws.onclose = function(event) {  var code = event.code;  var reason = event.reason;  var wasClean = event.wasClean;  // handle close event};ws.addEventListener("close", function(event) {  var code = event.code;  var reason = event.reason;  var wasClean = event.wasClean;  // handle close event});

5.WebSocket.onmessage 实例对象的onmessage属性,用于指定收到服务器数据后的回调函数

注意,服务器数据可能是文本也可能是二进制,要不同处理

ws.onmessage = function(event){  if(typeof event.data === String) {    console.log("Received data string");  }  if(event.data instanceof ArrayBuffer){    var buffer = event.data;    console.log("Received arraybuffer");  }}

6.WebSocket.send() 实例对象的send方法用于向服务器发送数据

ws.send('your message');

7.WebSocket.bufferedAmount 实例对象的bufferedAmount属性,表示还有多少字节的二进制数据没有发送出去,常用语判断发送是否结束

var data = new ArrayBuffer(10000000);socket.send(data);if (socket.bufferedAmount === 0) {  // 发送完毕} else {  // 发送还没结束}

8.WebSocket.onerror 实例对象onerror属性,用于指定报错时的回调函数

socket.onerror = function(event) {  // handle error event};socket.addEventListener("error", function(event) {  // handle error event});


Tags:WebSocket   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
最近工作中需要开发前端操作远程虚拟机的功能,简称 WebShell。基于当前的技术栈为 react+django,调研了一会发现大部分的后端实现都是 django+channels 来实现 websocket 服务。...【详细内容】
2021-09-13  Tags: WebSocket  点击:(52)  评论:(0)  加入收藏
前言:作为一个刚踏入职场的实习生,我很幸运参加了某个政府项目,并且在项目中负责一个核心模块功能的开发,而不是从头到尾对数据库的crud。虽然我一直心里抱怨我的工作范围根本...【详细内容】
2021-05-24  Tags: WebSocket  点击:(231)  评论:(0)  加入收藏
1)通知功能:保持一个长连接,当服务端游新的消息,能够实时的推送到使用方。像知乎的点赞通知、评论等,都可以使用WebSocket通信。某些使用H5的客户端,为了简化开发,也会使用WebSocke...【详细内容】
2021-03-03  Tags: WebSocket  点击:(157)  评论:(0)  加入收藏
背景:一般与服务端交互频繁的需求,可以使用轮询机制来实现。然而一些业务场景,比如游戏大厅、直播、即时聊天等,这些需求都可以或者说更适合使用长连接来实现,一方面可以减少轮询...【详细内容】
2020-12-17  Tags: WebSocket  点击:(156)  评论:(0)  加入收藏
1. 前言Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送...【详细内容】
2020-11-11  Tags: WebSocket  点击:(100)  评论:(0)  加入收藏
前段时间我有这样一个需求,想和一个异地的人一起看电影,先后在网上找了一些方案,不过那几个案都有一些缺点...【详细内容】
2020-10-21  Tags: WebSocket  点击:(92)  评论:(0)  加入收藏
1. 前言Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数...【详细内容】
2020-09-18  Tags: WebSocket  点击:(97)  评论:(0)  加入收藏
前言服务器和客户端保持长连接通信,实现方式比较多。有很多成熟的框架可以完成,底层无非都是对Socket流的封装和使用。一、SOCKET原理Socket大致是指在端到端的一个连接中,这...【详细内容】
2020-08-06  Tags: WebSocket  点击:(75)  评论:(0)  加入收藏
1. 心跳重连原由 心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生。websocket连接断开有以下两种情况:前端断开在使用websocket过程中,可能会出现...【详细内容】
2020-07-29  Tags: WebSocket  点击:(308)  评论:(0)  加入收藏
用这些简化了 WebSockets 的开源支持工具来控制你的流媒体。 来源:https://linux.cn/article-12347-1.html 作者:Kevin Sonney 译者:Xingyu.Wang(本文字数:4340,阅读时长大约:6 分...【详细内容】
2020-06-25  Tags: WebSocket  点击:(96)  评论:(0)  加入收藏
▌简易百科推荐
阿里云镜像源地址及安装网站地址https://developer.aliyun.com/mirror/centos?spm=a2c6h.13651102.0.0.3e221b111kK44P更新源之前把之前的国外的镜像先备份一下 切换到yumcd...【详细内容】
2021-12-27  干程序那些事    Tags:CentOS7镜像   点击:(1)  评论:(0)  加入收藏
前言在实现TCP长连接功能中,客户端断线重连是一个很常见的问题,当我们使用netty实现断线重连时,是否考虑过如下几个问题: 如何监听到客户端和服务端连接断开 ? 如何实现断线后重...【详细内容】
2021-12-24  程序猿阿嘴  CSDN  Tags:Netty   点击:(12)  评论:(0)  加入收藏
一. 配置yum源在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repovim /etc/yum.repos.d/google-chrome.repo按i进入编辑模式写入如下内容:[google-chrome]name=googl...【详细内容】
2021-12-23  有云转晴    Tags:chrome   点击:(7)  评论:(0)  加入收藏
一. HTTP gzip压缩,概述 request header中声明Accept-Encoding : gzip,告知服务器客户端接受gzip的数据 response body,同时加入以下header:Content-Encoding: gzip:表明bo...【详细内容】
2021-12-22  java乐园    Tags:gzip压缩   点击:(9)  评论:(0)  加入收藏
yum -y install gcc automake autoconf libtool makeadduser testpasswd testmkdir /tmp/exploitln -s /usr/bin/ping /tmp/exploit/targetexec 3< /tmp/exploit/targetls -...【详细内容】
2021-12-22  SofM    Tags:Centos7   点击:(7)  评论:(0)  加入收藏
Windows操作系统和Linux操作系统有何区别?Windows操作系统:需支付版权费用,(华为云已购买正版版权,在华为云购买云服务器的用户安装系统时无需额外付费),界面化的操作系统对用户使...【详细内容】
2021-12-21  卷毛琴姨    Tags:云服务器   点击:(6)  评论:(0)  加入收藏
参考资料:Hive3.1.2安装指南_厦大数据库实验室博客Hive学习(一) 安装 环境:CentOS 7 + Hadoop3.2 + Hive3.1 - 一个人、一座城 - 博客园1.安装hive1.1下载地址hive镜像路径 ht...【详细内容】
2021-12-20  zebra-08    Tags:Hive   点击:(9)  评论:(0)  加入收藏
以下是服务器安全加固的步骤,本文以腾讯云的CentOS7.7版本为例来介绍,如果你使用的是秘钥登录服务器1-5步骤可以跳过。1、设置复杂密码服务器设置大写、小写、特殊字符、数字...【详细内容】
2021-12-20  网安人    Tags:服务器   点击:(7)  评论:(0)  加入收藏
项目中,遇到了一个问题,就是PDF等文档不能够在线预览,预览时会报错。错误描述浏览器的console中,显示如下错误:nginx代理服务报Mixed Content: The page at ******** was loaded...【详细内容】
2021-12-17  mdong    Tags:Nginx   点击:(7)  评论:(0)  加入收藏
转自: https://kermsite.com/p/wt-ssh/由于格式问题,部分链接、表格可能会失效,若失效请访问原文密码登录 以及 通过密钥实现免密码登录Dec 15, 2021阅读时长: 6 分钟简介Windo...【详细内容】
2021-12-17  LaLiLi    Tags:SSH连接   点击:(16)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条