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 相关文章推荐
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
js实现显示手机号码效果
Mar 09 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
vue实现学生信息管理系统
May 30 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
PHP 数组教程 定义数组
2009/10/23 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
学习Python列表的基础知识汇总
2020/03/10 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
计算机专业个人求职信范例
2013/09/23 职场文书
医学院四年学习生活的自我评价
2013/11/06 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
机关职员工作检讨书
2014/10/23 职场文书
教师节倡议书2015
2015/04/27 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
村主任当选感言
2015/08/01 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python