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框架Express的模板视图机制分析
Jul 19 NodeJs
NodeJS学习笔记之(Url,QueryString,Path)模块
Jan 13 NodeJs
nodejs实现遍历文件夹并统计文件大小
May 28 NodeJs
使用DNode实现php和nodejs之间通信的简单实例
Jul 06 NodeJs
nodejs基础知识
Feb 03 NodeJs
3分钟快速搭建nodejs本地服务器方法运行测试html/js
Apr 01 NodeJs
NodeJs安装npm包一直失败的解决方法
Apr 28 NodeJs
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
May 15 NodeJs
nodejs中request库使用HTTPS代理的方法
Apr 30 NodeJs
nodejs 递归拷贝、读取目录下所有文件和目录
Jul 18 NodeJs
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
Feb 06 NodeJs
用Nodejs实现在终端中炒股的实现
Oct 18 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 xml文件操作代码(一)
2009/03/20 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
分享php多功能图片处理类
2016/05/15 PHP
用于table内容排序
2006/07/21 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
Python定义函数实现累计求和操作
2020/05/03 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
致全体运动员广播稿
2014/02/01 职场文书
《锄禾》教学反思
2014/04/08 职场文书
活动总结报告格式
2014/05/09 职场文书
大班下学期个人总结
2015/02/13 职场文书
学风建设主题班会
2015/08/17 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
Python anaconda安装库命令详解
2021/10/16 Python