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 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
关于JavaScript的一些看法
May 27 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
详解Python迭代和迭代器
2016/03/28 Python
python 全局变量的import机制介绍
2017/09/07 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
美国羊皮公司:Overland
2018/01/15 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
使用索引有什么好处
2016/07/27 面试题
关于圣诞节的广播稿
2014/01/26 职场文书
个人求职自荐信范文
2014/06/20 职场文书
2014年计生工作总结
2014/11/21 职场文书
出国导师推荐信
2015/03/25 职场文书
学雷锋活动简报
2015/07/20 职场文书
《检阅》教学反思
2016/02/22 职场文书