基于html5和nodejs相结合实现websocket即使通讯


Posted in NodeJs onNovember 19, 2015

最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有WebSocket也很值得注意。可以用来做双屏互动游戏,何为双屏互动游戏?就是通过移动端设备来控制PC端网页游戏。这样的话就要用到实时通讯了,而WebSocket无疑是最合适的。WebSocket相较于HTTP来说,有很多的优点,主要表现在WebSocket只建立一个TCP连接,可以主动推送数据到客户端,而且还有更轻量级的协议头,减少数据传送量。所以WebSocket暂时来说是实时通讯的最佳协议了。

至于服务器语言选择nodeJs,一是因为自己是做前端的,对javascript比较熟悉,相比于其他后台语言,自然会更喜欢nodeJs了,二是NodeJs本身事件驱动的方式很擅长与大量客户端保持高并发的连接。所以就选择NodeJs了。

服务器的实现很简单,先装一个nodeJs的模块,叫nodejs-websocket , 直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了,然后就可以开始建立服务器了,因为有了nodejs-websocket模块,所以很多工作都不用我们自己做,直接调用别人封装好的方法就行了:

【服务端代码】,根据客户端传来的消息判断哪个是game1,哪个是game2,保存connection对象。

var ws = require("nodejs-websocket");
console.log("开始建立连接...")
var game1 = null,game2 = null , game1Ready = false , game2Ready = false;
var server = ws.createServer(function(conn){
  conn.on("text", function (str) {
    console.log("收到的信息为:"+str)
    if(str==="game1"){
      game1 = conn;
      game1Ready = true;
      conn.sendText("success");
    }
    if(str==="game2"){
      game2 = conn;
      game2Ready = true;
    }
    if(game1Ready&&game2Ready){
      game2.sendText(str);
    }
    conn.sendText(str)
  })
  conn.on("close", function (code, reason) {
    console.log("关闭连接")
  });
  conn.on("error", function (code, reason) {
    console.log("异常关闭")
  });
}).listen(8001)
console.log("WebSocket建立完毕")

【game1代码】:通过点击获取三个框的内容,传到服务器

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .kuang{text-align: center;margin-top:200px;}
    #mess{text-align: center}
    .value{width: 200px;height:200px;border:1px solid;text-align: center;line-height: 200px;display: inline-block;}
  </style>
</head>
<body>
  <div id="mess">正在连接...</div>
  <div class="kuang">
    <div class="value" id="value1">小明小明</div>
    <div class="value" id="value2">大胸大胸</div>
    <div class="value" id="value3">小张小张</div>
  </div>
  <script>
    var mess = document.getElementById("mess");
    if(window.WebSocket){
      var ws = new WebSocket('ws://192.168.17.80:8001');
      ws.onopen = function(e){
        console.log("连接服务器成功");
        ws.send("game1");
      }
      ws.onclose = function(e){
        console.log("服务器关闭");
      }
      ws.onerror = function(){
        console.log("连接出错");
      }
      ws.onmessage = function(e){
        mess.innerHTML = "连接成功"
        document.querySelector(".kuang").onclick = function(e){
          var time = new Date();
          ws.send(time + " game1点击了“" + e.target.innerHTML+"”");
        }
      }
    }
  </script>
</body>
</html>

【game2代码】:获取服务推送来的消息,并且显示

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .kuang{text-align: center;margin-top:200px;}
    #mess{text-align: center}
  </style>
</head>
<body>
  <div id="mess"></div>
  <script>
    var mess = document.getElementById("mess");
    if(window.WebSocket){
      var ws = new WebSocket('ws://192.168.17.80:8001');
      ws.onopen = function(e){
        console.log("连接服务器成功");
        ws.send("game2");
      }
      ws.onclose = function(e){
        console.log("服务器关闭");
      }
      ws.onerror = function(){
        console.log("连接出错");
      }
      ws.onmessage = function(e){
        var time = new Date();
        mess.innerHTML+=time+"的消息:"+e.data+"<br>"
      }
    }
  </script>
</body>
</html>

运行截图:

基于html5和nodejs相结合实现websocket即使通讯

代码非常简单:很容易看懂,nodejs-WebSocket的调用也非常简洁明了,具体nodejs-websocket的API可以看https://www.npmjs.org/package/nodejs-websocket,里面都有介绍,自己测试一下,就很容易了,客户端的实现也是很简单,就通过onopen,onmessage等几个方法就可以实现了。

ps:nodejs缺点

1. nodejs更新很快,可能会出现版本联兼容
2. nodejs还不算成熟,还没有大制作。
3. nodejs不像其他的服务器,对于不同的连接,不支持进程和线程操作。
在权衡Nodejs给我们带来无限畅快的开发的同时,要考虑到他的不成熟,特别是对于“长连接”的网络通信应用。

NodeJs 相关文章推荐
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
Jan 01 NodeJs
Nodejs实现批量下载妹纸图
May 28 NodeJs
实例详解Nodejs 保存 payload 发送过来的文件
Jan 14 NodeJs
nodeJs内存泄漏问题详解
Sep 05 NodeJs
解析NodeJs的调试方法
Dec 11 NodeJs
详解NodeJs支付宝移动支付签名及验签
Jan 06 NodeJs
windows 下安装nodejs 环境变量设置
Feb 02 NodeJs
nodejs中全局变量的实例解析
Mar 07 NodeJs
理解nodejs的stream和pipe机制的原理和实现
Aug 12 NodeJs
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
Sep 18 NodeJs
nodejs中密码加密处理操作详解
Mar 20 NodeJs
nodejs多版本管理总结
Apr 03 NodeJs
浅析nodejs实现Websocket的数据接收与发送
Nov 19 #NodeJs
Nodejs实战心得之eventproxy模块控制并发
Oct 27 #NodeJs
浅谈Nodejs观察者模式
Oct 13 #NodeJs
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
Aug 21 #NodeJs
nodejs创建web服务器之hello world程序
Aug 20 #NodeJs
windows下安装nodejs及框架express
Aug 07 #NodeJs
使用DNode实现php和nodejs之间通信的简单实例
Jul 06 #NodeJs
You might like
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Python单链表的简单实现方法
2014/09/23 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
python实现证件照换底功能
2019/08/20 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
高中生自我鉴定范文
2013/10/30 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
标准单位租车协议书
2014/09/23 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL