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 26 NodeJs
NodeJS使用jQuery选择器操作DOM
Feb 13 NodeJs
详解nodejs 文本操作模块-fs模块(三)
Dec 22 NodeJs
深入nodejs中流(stream)的理解
Mar 27 NodeJs
详解nodejs爬虫程序解决gbk等中文编码问题
Apr 06 NodeJs
初识NodeJS服务端开发入门(Express+MySQL)
Apr 07 NodeJs
nodejs mysql 实现分页的方法
Jun 06 NodeJs
nodeJS微信分享
Dec 20 NodeJs
使用nodejs+express实现简单的文件上传功能
Dec 27 NodeJs
详解Nodejs内存治理
May 13 NodeJs
CentOS7中源码编译安装NodeJS的完整步骤
Oct 13 NodeJs
搭建一个nodejs脚手架的方法步骤
Jun 28 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
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
非常好的js代码
2006/06/27 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
python连接mysql调用存储过程示例
2014/03/05 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
通过实例解析python描述符原理作用
2020/01/22 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
老公保证书范文
2014/04/29 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
表扬信范文
2015/05/04 职场文书
小学班主任研修日志
2015/11/13 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
vue实现Toast组件轻提示
2022/04/10 Vue.js