websocket

websocket是HTML5开始提供的一种单个TCP连接上进行全双工通讯的协议。它让客户端和服务端之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性连接,并进行双向数据传输。它能更好的节省服务器资源和带宽,并且能够更实时的通讯。
传统方式采用的是ajax轮询。即在特定的时间间隔,由浏览器对服务器发送http请求,然后由服务器返回最新的数据给客户端。

创建websocket对象

var wx = new WebSocket(url, [protocol]);
url指定连接的URL,protocol可选,指定可接受的子协议

webSocket属性

ws.readyState属性
0 - 表示连接尚未建立
1 - 表示连接已经建立
2 - 表示连接正在进行关闭
3 - 表示连接已经关闭或者连接不能打开

webSocket事件

ws.onopen - 连接建立时触发
ws.onmessage - 客户端接收服务端数据时触发
ws.oclose - 连接关闭时触发
ws.onerroe - 通信发生错误时触发

webSocket方法

ws.send() 使用连接发送数据
ws.close() 关闭连接

示例:

创建两个html文件,模拟两个客户端

<body>
<p>小明</p>
<button id='send'>发送</button>
<input type='text' id='inputText'>
<p id='dispStatus'>正在连接...</p> <script>
var inputText=document.getElementById('inputText');
var dispStatus=document.getElementById('dispStatus');
var ws=new WebSocket('ws://192.168.1.136:8000'); //创建websocket连接,,服务端的IP+端口号
ws.onopen=function(e){ //开始创建连接时的事件
ws.send("xiaoming")
} ws.onmessage=function(e){ //读取服务端接收到的信息
document.getElementById('send').onclick=function(e){
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
var nowTime =hours+":"+minutes+":"+seconds
ws.send(nowTime + "===小明==>" + inputText.value); //向服务端发送输入框中的值
} dispStatus.innerHTML+= "<br/>"+e.data; //信息显示
} ws.onclose = function(){
dispStatus.innerHTM +="<br/>服务器关闭"
} ws.onerror = function() {
dispStatus.innerHTM +="<br/>连接出错"
}
</script>
</body>
<body>
<p>小李</p>
<button id='send'>发送</button>
<input type='text' id='inputText'>
<p id='dispStatus'>正在连接...</p> <script>
var inputText=document.getElementById('inputText');
var dispStatus=document.getElementById('dispStatus');
var ws=new WebSocket('ws://192.168.1.136:8000'); //创建websocket连接,,服务端的IP+端口号
ws.onopen=function(e){ //开始创建连接时的事件
ws.send("xiaoli")
} ws.onmessage=function(e){ //读取服务端接收到的信息 document.getElementById('send').onclick=function(e){
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
var nowTime =hours+":"+minutes+":"+seconds
ws.send(nowTime + "===小李==>" + inputText.value); //向服务端发送输入框中的值
} dispStatus.innerHTML+= "<br/>"+e.data; //将信息显示出来
} ws.onclose = function(){
dispStatus.innerHTM +="<br/>服务器关闭"
} ws.onerror = function() {
dispStatus.innerHTM +="<br/>连接出错"
}
</script>
</body>

server.js模拟服务器

var ws=require("nodejs-websocket");     //引入websocket模块
console.log("开始建立连接..."); //后台打印状态信息 var name1 = null,
name2 = null,
name1Ready = false,
name2Ready = false;
var server=ws.createServer(function(connect){ //创建一个新连接
connect.on("text",function(msg){ //接收触发事件
console.log("收到的消息是:"+msg); //接收到新消息之后在后台打印出来
if(msg === "xiaoming"){
name1 = connect;
name1Ready = true;
name1.sendText("小明连接成功!")
}
if(msg === "xiaoli"){
name2 = connect;
name2Ready = true;
name2.sendText("小李连接成功!")
}
if(name2Ready && name1Ready){
name1.sendText(msg);
name2.sendText(msg);
} // connect.sendText(msg)
});
connect.on("close", function(code, reason) {
console.log("连接关闭")
});
connect.on("error", function(code, reason) { }); }).listen(8000)
console.log("websocket 建立完毕")

html和node.js实现websocket的更多相关文章

  1. 基于node.js 的 websocket的移动端H5直播开发

    这一篇介绍一下基于node.js 的 websocket的移动端H5直播开发, 下载文章底部的源码,我是用vscode打开, 首先在第一个终端运行 npm run http-server 这个指令是运 ...

  2. Windows下Node.js+Express+WebSocket 安装配置

    Linux参考: Linux安装Node.js 使用Express搭建Web服务器 Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V ...

  3. node.js实现WebSocket

    最近在学习“HTML5游戏开发实战”,其中第8章内容是使用WebSocket来构建多人游戏---<你画我猜>.然而在实现过程中,却一直出错: 客户端请求时,服务器端会报错并终止: 而浏览器 ...

  4. 基于node.js的websocket上传小功能

    一.node.js 在目录里新建index.js var ws = require("nodejs-websocket"); console.log("开始建立连接... ...

  5. 基于node.js的websocket 前后端交互小功能

    一.node var ws = require("nodejs-websocket"); console.log("开始建立连接...") var server ...

  6. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  7. (转)使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  8. 使用Node.js+Socket.IO搭建WebSocket实时应用【转载】

    原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新 ...

  9. 基于Node.js + WebSocket 的简易聊天室

    代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...

随机推荐

  1. nodejs --- crypto实现加密(转)

    crypto实现加密 本文转自:http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0 ...

  2. 安装Hexo遇到npm的问题

    目录:1.安装git.nvm.node.js 2.安装Hexo遇到npm的问题-及解决办法 3.初步安装完成Hexo ============================ 安装git.nvm.no ...

  3. QML 读取本地文件内容

    QML 对本地文件的读写 QML 里似乎没有提供直接访问本地文件的模块,但是我们能够自己扩展 QML,给它加上访问本地文件的能力. Qt 官方文档对 QML 是这样介绍的: It defines an ...

  4. HDU 5441——Travel——————【并查集+二分查界限】

    Travel Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Su ...

  5. vue学习笔记 vue安装

    一.安装步骤:(用cmd命令用管理身份安装比较顺利) 1.安装node,安装后可以输入npm -v 查看版本,升级npm可用 cnpm install npm -g 2.安装vue 输入cnpm in ...

  6. 创建Graphics对象与Pen对象

    Graphics对象表示GDI+绘图表面,是用于创建图形图像的对象,所以要通过GDI+创建绘图,必须先创建Graphics对象,然后才可以使用GDI+的笔.刷等结合颜色.字体等对象进行绘制线条形状.填 ...

  7. idea创建Javaweb项目

    1.Javaweb项目结构 1.1修改生成.class文件的位置为WEB-INF下的classes: 生成的.class文件位置: 1.2 设置第三方jar包添加位置:

  8. 随机练习:C#实现维吉尼亚加密与解密(解密前提为已知密匙)

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  9. 1.字符串池化(intern)机制及拓展学习

    1.字符串intern机制 用了这么久的python,时刻和字符串打交道,直到遇到下面的情况: a = "hello" b = "hello" print(a ...

  10. RNQOJ [stupid]愚蠢的矿工(树形依赖背包)

    题意 题目链接 Sol 树形依赖背包板子题 树形依赖背包大概就是说:对于一个点,只有选了它的父亲才能选自身 把dfs序建出来,倒过来考虑 设\(f[i][j]\)表示从第\(i\)个节点往后背包体积为 ...