基于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观察者模式
Oct 13 NodeJs
NodeJS整合银联网关支付(DEMO)
Nov 09 NodeJs
nodeJs链接Mysql做增删改查的简单操作
Feb 04 NodeJs
nodejs搭建本地http服务器教程
Mar 13 NodeJs
使用 NodeJS+Express 开发服务端的简单介绍
Apr 07 NodeJs
nodejs模块学习之connect解析
Jul 05 NodeJs
nodejs中art-template模板语法的引入及冲突解决方案
Nov 07 NodeJs
使用nodejs+express实现简单的文件上传功能
Dec 27 NodeJs
NodeJS如何实现同步的方法示例
Aug 24 NodeJs
Nodejs中获取当前函数被调用的行数及文件名详解
Dec 12 NodeJs
nodejs微信开发之自动回复的实现
Mar 17 NodeJs
Nodejs 数组的队列以及forEach的应用详解
Feb 25 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
php抽象类用法实例分析
2015/07/07 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
JS实现星星海特效
2019/12/24 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Python数据正态性检验实现过程
2020/04/18 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
python爬虫 requests-html的使用
2020/11/30 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
最新创业融资计划书
2014/01/19 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电