WebSockets基础

网络套接字是下一代WEB应用程序双向通信技术,它是基于一个独立的socket并且需要客户端浏览器支持HTML5。

一旦你了解了网络套接字与WEB服务器的连接,你将可以从浏览器发送数据到服务器并且可以接收由服务器返回的响应数据。

以下是创建一个新的WebSocket对象的API:

var Socket = new WebSocket(url, [protocal] );

这里第一个参数是指要连接的URL,第二个参数是可选的,如果需要的话,则是指定一个的服务器支持的协议。

WEB Socket属性:

属性 说明
Socket.readyState readyState的代表的ReadOnly属性的连接状态。它可以有以下值:

  1. 一个0值表示该连接尚未建立。
  2. 值为1表示连接建立和沟通是可能的。
  3. 值为2表示连接是通过将结束握手。
  4. 值为3表示连接已关闭或无法打开。
Socket.bufferedAmount 读属性的bufferedAmount代表文本的字节数,utf - 8的排队使用send()方法。

WEB Socket事件:

事件 处理程序 说明
open Socket.onopen 此事件发生在套接字建立连接。
message Socket.onmessage 此事件发生时,客户端收到来自服务器的数据。
error Socket.onerror 此事件发生时有任何通信错误。
close Socket.onclose 此事件发生在连接关闭。

WEB Socket方法:

方法 说明
Socket.send() send(data)方法用来连接传输数据。
Socket.close() close()方法将被用于终止任何现有的连接。

WEB Socket例子:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function WebSocketTest()
{
  if ("WebSocket" in window)
  {
     alert("WebSocket is supported by your Browser!");
     // Let us open a web socket
     var ws = new WebSocket("ws://localhost:9998/echo");
     ws.onopen = function()
     {
        // Web Socket is connected, send data using send()
        ws.send("Message to send");
        alert("Message is sent...");
     };
     ws.onmessage = function (evt)
     {
        var received_msg = evt.data;
        alert("Message is received...");
     };
     ws.onclose = function()
     {
        // websocket is closed.
        alert("Connection is closed...");
     };
  }
  else
  {
     // The browser doesn‘t support WebSocket
     alert("WebSocket NOT supported by your Browser!");
  }
}
</script>
</head>
<body>
<div id="sse">
   <a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>

WebSockets基础

时间: 2024-10-10 20:47:17

WebSockets基础的相关文章

HTML5 WebSockets 基础使用分享

摘要:HTML5之中一个很酷的新特性就是WebSockets,它可以让我们无需AJAX请求即可与服务器端对话.今天彬Go将让大家通过Php环境的服务器端运行WebSocket,创建客户端并通过WebSockets协议发送和接收服务器端信息. 什么是WebSockets? WebSockets是在一个(TCP)接口进行双向通信的技术,PUSH技术类型.同时WebSockets仍将基于W3C标准,目前为止,Chrome和Safari的最新版本浏览器已经支持WebSockets了. WebSocket

自定义元素–为你的HTML代码定义新元素

注意:这篇文章介绍的 API 尚未完全标准化,并且仍在变动中,在项目中使用这些实验性 API 时请务必谨慎. 引言 现在的 web 严重缺乏表达能力.你只要瞧一眼“现代”的 web 应用,比如 GMail,就会明白我的意思: 堆砌 <div> 一点都不现代.然而可悲的是,这就是我们构建 web 应用的方式.在现有基础上我们不应该有更高的追求吗? 您还可以参考以下HTML5/CSS3相关文章:<使用CSS3开启GPU硬件加速提升网站动画渲染性能><HTML5 WebSocket

java web 开发三剑客 -------电子书

Internet,人们通常称为因特网,是当今世界上覆盖面最大和应用最广泛的网络.根据英语构词法,Internet是Inter + net,Inter-作为前缀在英语中表示“在一起,交互”,由此可知Internet的目的是让各个net交互.所以,Internet实质上是将世界上各个国家.各个网络运营商的多个网络相互连接构成的一个全球范围内的统一网,使各个网络之间能够相互到达.各个国家和运营商构建网络采用的底层技术和实现可能各不相同,但只要采用统一的上层协议(TCP/IP)就可以通过Internet

Photon服务器引擎(二)socket/TCP/UDP基础及Unity聊天室的实现

Photon服务器引擎(二)socket/TCP/UDP基础及Unity聊天室的实现 我们平时说的最多的socket是什么呢,实际上socket是对TCP/IP协议的封装,Socket本身并不是协议,而是一个调用接口(API). 通过Socket,我们才能使用TCP/IP协议.实际上,Socket跟TCP/IP协议没有必然的联系.Socket编程接口在设计的时候,就希望也能适应其他的网络协议.所以说,Socket的出现只是使得程序员更方便地使用TCP/IP协议栈而已,是对TCP/IP协议的抽象,

Tornado 学习笔记 Tornado基础 1

这是根据官方文档学习后总结的笔记: Tornado基础 Tornado是一套web框架和异步网络功能库,使用非阻塞是IO,可支持数万个活动连接.支持长活跃连接,支持 long polling长连接,支持WebSockets. A web framework (including RequestHandler which is subclassed to create web applications, and various supporting classes). Client- and se

Quick-Cocos2d-x初学者游戏教程(一)--------------------Quick的一些基础知识

本文转自Quick-Cocos2d-x初学者游戏教程(一) 前言 虽然之前已经写过了很多 Cocos2d-x 相关的教程和文档,但本次却是我第一次接触 Quick,第一次接触 Lua,所以此次的教程本人将站在一个初学者的角度(看到这里是不是想白眼我了,哈哈,别切啊!尽管第一次,但我身边可是有很多 Quick 大神的,廖大大也在旁边办公室,没准撒个娇大神就把他知道的全部要点倾囊相授了啦!),全方位的解析 Quick 的学习过程,并同大家一起学习如何利用 Quick-Cocos2d-x 开发一款属于

关于http headers 在 Websockets client API 中的正确操作

由于这段时间要处理websocket一些问题,要在WebSocket连接过程中使用最基础的用户名密码验证,但是一直没有找到怎么处理,然后详细阅读了RFC6455文档,然后才知道怎么处理.当然本方最后也找到一个详细的问题描述与解决方案:HTTP headers in Websockets client API 这个原题目就是:HTTP headers in Websockets client API 解决方案是: There is no method in the JavaScript WebSo

深入探索WebSockets

WebSockets简介 在2008年中期,开发人员Michael Carter和Ian Hickson特别敏锐地感受到Comet在实施任何真正强大的东西时所带来的痛苦和局限. 通过在IRC和W3C邮件列表上的合作,他们制定了一项计划,在网络上引入现代实时双向通信的新标准,因此创造了"WebSocket"这个名称. 这个想法进入了W3C HTML草案标准,不久之后,Michael Carter写了一篇文章,将Comet社区介绍给WebSockets. 2010年,谷歌Chrome 4是

ASP.NET Core 2.2 基础知识(十六) SignalR 概述

原文:ASP.NET Core 2.2 基础知识(十六) SignalR 概述 我一直觉得学习的最好方法就是先让程序能够正常运行,才去学习他的原理,剖析他的细节. 就好像这个图: 所以,我们先跟着官方文档,创建一个 SignalR 应用: https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/signalr?view=aspnetcore-2.2&tabs=visual-studio 这个例子一共涉及到下面几个步骤: 自定义中心 ChatH