Javascript WebSocket使用实例介绍(简明入门教程)


Posted in Javascript onApril 16, 2014

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

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

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

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

WEB Socket属性:

属性 说明
Socket.readyState readyState的代表的ReadOnly属性的连接状态。它可以有以下值: 一个0值表示该连接尚未建立。 值为1表示连接建立和沟通是可能的。 值为2表示连接是通过将结束握手。 值为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>
Javascript 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 Javascript
JavaScript框架(iframe)操作总结
Apr 16 #Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 #Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 #Javascript
JavaScript面向对象编程入门教程
Apr 16 #Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 #Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 #Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 #Javascript
You might like
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
python实现堆栈与队列的方法
2015/01/15 Python
Python创建xml的方法
2015/03/10 Python
21行Python代码实现拼写检查器
2016/01/25 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
python根据时间获取周数代码实例
2019/09/30 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
python对一个数向上取整的实例方法
2020/06/18 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
python list的index()和find()的实现
2020/11/16 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
护理专业的自荐信
2013/10/22 职场文书
加拿大留学自荐信
2014/01/28 职场文书
科技工作者先进事迹
2014/08/16 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
党校党性分析材料
2014/12/19 职场文书
客服专员岗位职责
2015/02/10 职场文书
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript