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中的this详解
Mar 26 NodeJs
利用nodejs监控文件变化并使用sftp上传到服务器
Feb 18 NodeJs
详解HTTPS 的原理和 NodeJS 的实现
Jul 04 NodeJs
nodejs取得当前执行路径的方法
May 13 NodeJs
通过nodejs 服务器读取HTML文件渲染到页面的方法
May 17 NodeJs
NodeJS实现自定义流的方法
Aug 01 NodeJs
NodeJS搭建HTTP服务器的实现步骤
Oct 12 NodeJs
NodeJs 文件系统操作模块fs使用方法详解
Nov 26 NodeJs
详解nodejs 配置文件处理方案
Jan 02 NodeJs
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
Feb 02 NodeJs
nodejs使用async模块同步执行的方法
Mar 02 NodeJs
Nodejs核心模块之net和http的使用详解
Apr 02 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
德劲1103二次变频版的打磨
2021/03/02 无线电
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
php文件缓存方法总结
2016/03/16 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
react build 后打包发布总结
2018/08/24 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
入党自我评价范文
2014/02/02 职场文书
股份合作协议书
2014/04/12 职场文书
防暑降温通知书
2015/04/27 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android