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 npm常用命令
Jun 14 NodeJs
nodejs连接mongodb数据库实现增删改查
Dec 01 NodeJs
nodejs的压缩文件模块archiver用法示例
Jan 18 NodeJs
NodeJS遍历文件生产文件列表功能示例
Jan 22 NodeJs
基于Nodejs利用socket.io实现多人聊天室
Feb 22 NodeJs
nodejs实现邮件发送服务实例分享
Mar 29 NodeJs
详解Nodejs之静态资源处理
Jun 05 NodeJs
nodejs模块学习之connect解析
Jul 05 NodeJs
nodejs简单抓包工具使用详解
Aug 23 NodeJs
Nodejs中使用puppeteer控制浏览器中视频播放功能
Aug 26 NodeJs
Nodejs + sequelize 实现增删改查操作
Nov 07 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
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
header导出Excel应用示例
2014/01/24 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
现金会计岗位职责
2013/12/05 职场文书
企业消防安全制度
2014/02/02 职场文书
河童之夏观后感
2015/06/11 职场文书
SQL SERVER触发器详解
2022/02/24 SQL Server