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 面向对象之神奇的prototype
Feb 26 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
详解vue-property-decorator使用手册
Jul 29 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
20个PHP常用类库小结
2011/09/11 PHP
php封装的验证码类分享
2017/02/26 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
React注册倒计时功能的实现
2018/09/06 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python找出9个连续的空闲端口
2016/02/01 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
PyTorch中permute的用法详解
2019/12/30 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
印度网上药店:1mg
2017/10/13 全球购物
银行会计职员个人的自我评价
2013/09/29 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
酒店管理求职信
2014/06/09 职场文书
小爸爸观后感
2015/06/15 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
Django框架模板用法详解
2022/06/10 Python