基于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 后缀名判断限制代码
Mar 31 NodeJs
抛弃Nginx使用nodejs做反向代理服务器
Jul 17 NodeJs
Nodejs异步回调的优雅处理方法
Sep 25 NodeJs
详谈nodejs异步编程
Dec 04 NodeJs
iPhone手机上搭建nodejs服务器步骤方法
Jul 06 NodeJs
浅析nodejs实现Websocket的数据接收与发送
Nov 19 NodeJs
Nodejs获取网络数据并生成Excel表格
Mar 31 NodeJs
简单实现nodejs上传功能
Jan 14 NodeJs
NodeJs使用Mysql模块实现事务处理实例
May 31 NodeJs
NodeJS 实现手机短信验证模块阿里大于功能
Jun 19 NodeJs
一文秒懂nodejs中的异步编程
Jan 28 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开发文件系统实例讲解
2006/10/09 PHP
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
php while循环控制的简单实例
2016/05/30 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
javascript显式类型转换实例分析
2015/04/25 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
python 一维二维插值实例
2020/04/22 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
资深财务管理人员自我评价
2013/09/22 职场文书
交通事故检查书范文
2014/01/30 职场文书
《老王》教学反思
2014/02/23 职场文书
《将心比心》教学反思
2014/04/08 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
乳制品整治工作方案
2014/05/29 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
2015年统战工作总结
2015/05/19 职场文书
python如何读取.mtx文件
2021/04/22 Python
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
如何利用React实现图片识别App
2022/02/18 Javascript