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 相关文章推荐
抛弃Nginx使用nodejs做反向代理服务器
Jul 17 NodeJs
nodejs教程之环境安装及运行
Nov 21 NodeJs
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
Dec 18 NodeJs
图片上传之FileAPI与NodeJs
Jan 24 NodeJs
NodeJS测试框架mocha入门教程
Mar 28 NodeJs
用Nodejs搭建服务器访问html、css、JS等静态资源文件
Apr 28 NodeJs
NodeJS实现微信公众号关注后自动回复功能
May 31 NodeJs
nodejs使用express获取get和post传值及session验证的方法
Nov 09 NodeJs
windows系统下更新nodejs版本的方案
Nov 24 NodeJs
nodejs简单实现TCP服务器端和客户端的聊天功能示例
Jan 04 NodeJs
Nodejs连接mysql并实现增、删、改、查操作的方法详解
Jan 04 NodeJs
使用nodejs分离html文件里的js和css详解
Apr 12 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
PHP4引用文件语句的对比
2006/10/09 PHP
PHP array_push 数组函数
2009/12/26 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
python基础教程之Filter使用方法
2017/01/17 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
python计算导数并绘图的实例
2020/02/29 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
python软件都是免费的吗
2020/06/18 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
销售经理岗位职责
2014/03/16 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL