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及配置app.js文件的详细步骤
May 11 NodeJs
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
Sep 26 NodeJs
轻松创建nodejs服务器(10):处理POST请求
Dec 18 NodeJs
浅析nodejs实现Websocket的数据接收与发送
Nov 19 NodeJs
NodeJS实现客户端js加密
Jan 09 NodeJs
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
May 13 NodeJs
详解nodejs异步I/O和事件循环
Jun 07 NodeJs
NodeJS爬虫实例之糗事百科
Dec 14 NodeJs
nodejs多版本管理总结
Apr 03 NodeJs
深入理解NodeJS 多进程和集群
Oct 17 NodeJs
nodejs实现用户登录路由功能
May 22 NodeJs
Nodejs实现图片上传、压缩预览、定时删除功能
Oct 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设置页面超时时间解决方法
2015/09/22 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
使用pandas读取文件的实现
2019/07/31 Python
python 修改本地网络配置的方法
2019/08/14 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
开展批评与自我批评发言材料
2014/05/15 职场文书
市场营销毕业求职信
2014/08/07 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
教师个人教学反思
2016/02/23 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python