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 相关文章推荐
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
vue和小程序项目中使用iconfont的方法
May 19 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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中的错误处理和异常处理
2017/02/04 PHP
对联广告js flash激活
2006/10/19 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
Python configparser模块应用过程解析
2020/08/14 Python
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
医药专业推荐信
2013/11/15 职场文书
考试违纪检讨书
2014/02/02 职场文书
母亲节演讲稿
2014/05/27 职场文书
建筑管理专业求职信
2014/07/28 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
法定代表人资格证明书
2015/06/18 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
MySQL详细讲解变量variables的用法
2022/06/21 MySQL