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入门详解(多篇文章结合)
Mar 07 NodeJs
Nodejs从有门道无门菜鸟起飞必看教程
Jul 20 NodeJs
nodejs如何获取时间戳与时间差
Aug 03 NodeJs
Nodejs下DNS缓存问题浅析
Nov 16 NodeJs
详解nodejs中exports和module.exports的区别
Feb 17 NodeJs
深入理解Nodejs Global 模块
Jun 03 NodeJs
NodeJS使用七牛云存储上传文件的方法
Jul 24 NodeJs
基于nodejs实现微信支付功能
Dec 20 NodeJs
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
Jan 05 NodeJs
基于Nodejs的Tcp封包和解包的理解
Sep 19 NodeJs
NodeJs生成sitemap站点地图的方法示例
Jun 11 NodeJs
Nodejs 数组的队列以及forEach的应用详解
Feb 25 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个人网站架设连环讲(一)
2006/10/09 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
JSONP基础知识详解
2017/03/19 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
pyside写ui界面入门示例
2014/01/22 Python
python对数组进行反转的方法
2015/05/20 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
django 外键创建注意事项说明
2020/05/20 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
python中time tzset()函数实例用法
2021/02/18 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
木工主管岗位职责
2013/12/08 职场文书
教学大赛获奖感言
2014/01/15 职场文书
安全生产责任书
2014/03/12 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
2014企业年终工作总结
2014/12/23 职场文书
开学典礼校长致辞
2015/07/29 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
nginx结合openssl实现https的方法
2021/07/25 Servers
Pandas-DataFrame知识点汇总
2022/03/16 Python
python中的getter与setter你了解吗
2022/03/24 Python