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 相关文章推荐
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
vue实现计算器功能
Feb 22 Javascript
antd table按表格里的日期去排序操作
Nov 17 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
ThinkPHP之getField详解
2014/06/20 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
document.write的几点使用心得
2014/05/14 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
详解python时间模块中的datetime模块
2016/01/13 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python3 实现调用串口功能
2019/12/26 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
师范生自我鉴定范文
2013/10/05 职场文书
医学求职自荐信
2014/06/21 职场文书
机关作风建设整改方案
2014/10/27 职场文书
聘任通知书
2015/09/21 职场文书