基于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制作爬虫全过程(续)
Dec 22 NodeJs
nodejs 整合kindEditor实现图片上传
Feb 03 NodeJs
你一定会收藏的Nodejs代码片段
Feb 04 NodeJs
NodeJS使用formidable实现文件上传
Oct 27 NodeJs
简单实现nodejs上传功能
Jan 14 NodeJs
win系统下nodejs环境安装配置
May 04 NodeJs
Nodejs中使用captchapng模块生成图片验证码
May 18 NodeJs
详解使用vscode+es6写nodejs服务端调试配置
Sep 21 NodeJs
详解Nodejs mongoose
Jun 10 NodeJs
nodejs aes 加解密实例
Oct 10 NodeJs
nodejs 使用 js 模块的方法实例详解
Dec 04 NodeJs
nodejs对mongodb数据库的增加修删该查实例代码
Jan 05 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管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
PHP安全上传图片的方法
2015/03/21 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python try except 捕获所有异常的实例
2018/10/18 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
Python实现TCP通信的示例代码
2019/09/09 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
在线课程:Skillshare
2019/04/02 全球购物
关键字final的用法
2013/10/02 面试题
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
《祁黄羊》教学反思
2014/04/22 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
Python基础之元类详解
2021/04/29 Python
关于python类SortedList详解
2021/09/04 Python