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 相关文章推荐
newxtree.js代码
Mar 13 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
vuex 的简单使用
Mar 22 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 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+flash+jQuery多图片上传源码分享
2020/07/27 PHP
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
Python实现新浪博客备份的方法
2016/04/27 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
Python爬豆瓣电影实例
2018/02/23 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
用python实现刷点击率的示例代码
2019/02/21 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
python爬虫---requests库的用法详解
2020/09/28 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
专业技术职务聘任书
2014/03/29 职场文书
高考励志标语
2014/06/05 职场文书
先进个人推荐材料
2014/12/29 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
代理词怎么写
2015/05/25 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
比赛口号霸气押韵
2015/12/24 职场文书