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 解析多维的Json数据格式
Nov 02 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
微信小程序实现自定义底部导航
Nov 18 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
php中的常用魔术方法总结
2013/08/02 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
详解python eval函数的妙用
2017/11/16 Python
python如何定义带参数的装饰器
2018/03/20 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
JAVA中的关键字有什么特点
2014/03/07 面试题
StringBuilder和String的区别
2015/05/18 面试题
社区活动策划方案
2014/08/21 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
万里长城导游词
2015/01/30 职场文书
社区活动总结
2015/02/04 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
Pandas-DataFrame知识点汇总
2022/03/16 Python