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 Post请求报socket hang up错误的解决办法
Sep 25 NodeJs
nodeJs链接Mysql做增删改查的简单操作
Feb 04 NodeJs
nodejs根据ip数组在百度地图中进行定位
Mar 06 NodeJs
nodejs中向HTTP响应传送进程的输出
Mar 19 NodeJs
NodeJS学习笔记之Module的简介
Mar 24 NodeJs
nodejs入门教程六:express模块用法示例
Apr 24 NodeJs
深入理解Nodejs Global 模块
Jun 03 NodeJs
理解nodejs的stream和pipe机制的原理和实现
Aug 12 NodeJs
Nodejs+express+ejs简单使用实例代码
Sep 18 NodeJs
详解Nodejs 通过 fs.createWriteStream 保存文件
Oct 10 NodeJs
浅谈NodeJs之数据库异常处理
Oct 25 NodeJs
nodejs微信扫码支付功能实现
Feb 17 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保存任意网络图片到服务器的方法
2015/04/14 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
python实现图片九宫格分割
2021/03/07 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
企划主管岗位职责
2013/12/12 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
Python中可变和不可变对象的深入讲解
2021/08/02 Python
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
使用python绘制分组对比柱状图
2022/04/21 Python
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript