NodeJs 实现简单WebSocket即时通讯的示例代码


Posted in NodeJs onAugust 05, 2019

服务器的实现很简单,先装一个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>

运行截图:

NodeJs 实现简单WebSocket即时通讯的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
使用Nodejs开发微信公众号后台服务实例
Sep 03 NodeJs
Windows系统下使用Sublime搭建nodejs环境
Apr 13 NodeJs
nodejs搭建本地服务器并访问文件的方法
Mar 03 NodeJs
angular2+nodejs实现图片上传功能
Mar 27 NodeJs
详解nodejs微信公众号开发——1.接入微信公众号
Apr 10 NodeJs
nodejs结合socket.io实现websocket通信功能的方法
Jan 12 NodeJs
nodejs 日志模块winston的使用方法
May 02 NodeJs
nodejs require js文件入口,在package.json中指定默认入口main方法
Oct 10 NodeJs
nodejs实现范围请求的实现代码
Oct 12 NodeJs
Nodejs 识别图片类型的方法
Aug 15 NodeJs
nodejs简单抓包工具使用详解
Aug 23 NodeJs
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
Dec 14 NodeJs
Nodejs监听日志文件的变化的过程解析
Aug 04 #NodeJs
nodejs对项目下所有空文件夹创建gitkeep的方法
Aug 02 #NodeJs
nodejs读取图片返回给浏览器显示
Jul 25 #NodeJs
关于NodeJS中的循环引用详解
Jul 23 #NodeJs
typescript nodejs 依赖注入实现方法代码详解
Jul 21 #NodeJs
nodejs 递归拷贝、读取目录下所有文件和目录
Jul 18 #NodeJs
nodejs二进制与Buffer的介绍与使用
Jul 11 #NodeJs
You might like
建立文件交换功能的脚本(二)
2006/10/09 PHP
php+mysql实现无限级分类
2015/11/11 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
在django中自定义字段Field详解
2019/12/03 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
商务英语专业自荐信
2013/10/14 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
学校春季防火方案
2014/06/08 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
七一讲话心得体会
2014/09/05 职场文书
见习报告怎么写
2014/10/31 职场文书
国庆庆典邀请函
2015/02/02 职场文书
实习证明模板
2015/06/16 职场文书
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers