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和JQuery实用代码片段(一)
Apr 07 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
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
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
stripos函数知识点实例分享
2019/02/11 PHP
javascript 面向对象编程基础:继承
2009/08/21 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
使用SAE部署Python运行环境的教程
2015/05/05 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
对Python函数设计规范详解
2019/07/19 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
python 基于opencv实现图像增强
2020/12/23 Python
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
销售主管的自我评价分享
2014/01/03 职场文书
九年级科学教学反思
2014/01/29 职场文书
教师演讲稿开场白
2014/08/25 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
查摆剖析材料范文
2014/09/30 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书