nodejs+websocket实时聊天系统改进版


Posted in NodeJs onMay 18, 2017

本文属于nodejs+websocket实时聊天系统的改进版本,具体内容如下

自己也是真的菜,一个websocket简单聊天系统硬被我搞了那么些天。

看来以后还是得写更多的代码。

client.html:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .kuang {
  width: 600px;
  min-height: 50px;
  max-height: 296px;
  border: 1px solid;
  float: left;
  display: block;
  position: relative;
  overflow-y: scroll;
 }

 .value {
  width: 200px;
 }

 .input {
  display: block;
  position: absolute;
  left: 0;
  margin-top: 300px;
 }
 </style>
</head>

<body>
 <label>连接用户:</label>
 <input type="text" id="name" />
 <button id="conn">连接</button>
 <button id="close">断开</button><br/><br/>
 <div class="kuang" id="mess"></div>
 <div class="input">
 <input type="text" class="value" id="value1" />
 <button id="send">发送</button>
 </div>
 <script>
 var input = document.getElementById("name");
 var conn = document.getElementById("conn");
 var close = document.getElementById("close");
 var mess = document.getElementById("mess");
 var value1 = document.getElementById("value1");
 var pattern = /^[\u4e00-\u9fa5]{2,10}$/;

 close.disabled = true;
 if (window.WebSocket) {
  conn.onclick = function () {
  if (!pattern.test(input.value)) {
   alert("名称不能为空且必须为中文");
   return;
  }
  var ws = new WebSocket('ws://127.0.0.1:8082');
  conn.disabled = true;
  close.disabled = false;
  ws.onopen = function (e) {
   console.log("连接服务器成功");
   ws.send(input.value);
   input.setAttribute("readOnly", 'true');
   value1.setAttribute("readOnly", 'true');
  }
  ws.onmessage = function (e) {
   value1.removeAttribute("readOnly");
   var time = new Date();
   mess.innerHTML += time.toUTCString() + ":" + e.data + "<br>";
   document.getElementById("send").onclick = function (e) {
   ws.send(input.value + "说:" + value1.value);
   value1.value = " ";
   }
   document.onkeydown = function (e) {
   e = e || window.event;
   if (e.keyCode == 13) {
    document.getElementById("send").onclick();
    return false;
   }
   }
  }
  ws.onclose = function (e) {
   console.log("服务器关闭");
  }
  ws.onerror = function () {
   console.log("连接出错");
  }
  /**
   * 客户端主动断开连接
   * 
   * **/
  close.onclick = function () {
   ws.onclose();
   ws.send(input.value + 'close' + "了连接");
   input.removeAttribute("readOnly");
   conn.disabled = false;
   close.disabled = true;
  }

  }


 }
 </script>
</body>

</html>

 只能说界面丑陋忽略它。
server.js:

var ws = require("nodejs-websocket");
console.log("开始建立连接...");
var str1 = null, str2 = null, clientReady = false, serverReady = false;
var a = [];
var server = ws.createServer(function (conn) {
 conn.on('text', function (str) {
 a.push(str);
 if (!clientReady) {
  if (a[0] === str) {
  str1 = conn;
  clientReady = true;
  str1.sendText("欢迎你" + str);

  }
 } else if (!serverReady) {
  if (str.indexOf('close') >= 0) {
  a.splice(2, 1);
  clientReady = false;
  str1 = null;
  return;
  }
  if (a[1] === str) {
  str2 = conn;
  serverReady = true;
  str2.sendText("欢迎你" + str);
  str1.sendText(str + "在线啦,你们可以聊天啦");
  return;
  }
 } else if (clientReady && serverReady) {
  str2.sendText(str);
  str1.sendText(str);
  if (str.indexOf('close') >= 0) {
  a.splice(2, a.length);
  var len = a.length;
  for (var i = 0; i < len; i++) {
   // 定位该元素位置
   if (str.indexOf(a[i]) >= 0) {
   a.splice(i, 1);
   if (i == 0) {
    str1 = str2;
   }
   serverReady = false;
   str2 = null;
   return;
   }

  }
  }
 }


 })

 conn.on("close", function (code, reason) {
 console.log("关闭连接");
 clientReady = false;
 serverReady = false;
 })
 conn.on("error", function (code, reason) {
 console.log("异常关闭");
 });
}).listen(8082);
console.log("websocket连接完毕")

简单的截图说明一下:

nodejs+websocket实时聊天系统改进版nodejs+websocket实时聊天系统改进版

nodejs+websocket实时聊天系统改进版

开启服务,相同页面执行两遍,就可以聊天啦。反正过程就是这样。就是还有一个大的问题。比如我a断开连接了,只有b一个人在连接巨人b还能发信息,可以发信息算可以吧。居然b自己接收自己的信息。那就不能忍了。

nodejs+websocket实时聊天系统改进版

就是这种呀,逻辑都错乱了,理清逻辑是个费脑子的事情。有知道的同学吗?怎么处理呀

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
nodejs npm包管理的配置方法及常用命令介绍
Jun 05 NodeJs
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
Sep 26 NodeJs
详谈nodejs异步编程
Dec 04 NodeJs
Windows系统下使用Sublime搭建nodejs环境
Apr 13 NodeJs
使用DNode实现php和nodejs之间通信的简单实例
Jul 06 NodeJs
NodeJs的优势和适合开发的程序
Aug 14 NodeJs
NodeJS链接MySql数据库的操作方法
Jun 27 NodeJs
nodejs模块学习之connect解析
Jul 05 NodeJs
利用nodeJs anywhere搭建本地服务器环境的方法
May 12 NodeJs
NodeJS加密解密及node-rsa加密解密用法详解
Oct 12 NodeJs
Nodejs + Websocket 指定发送及群聊的实现
Jan 09 NodeJs
NodeJS配置CORS实现过程详解
Dec 02 NodeJs
nodejs6下使用koa2框架实例
May 18 #NodeJs
Nodejs中使用captchapng模块生成图片验证码
May 18 #NodeJs
详解使用nodeJs安装Vue-cli
May 17 #NodeJs
NodeJS创建最简单的HTTP服务器
May 15 #NodeJs
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
May 13 #NodeJs
配置nodejs环境的方法
May 13 #NodeJs
nodejs multer实现文件上传与下载
May 10 #NodeJs
You might like
服务器端解压缩zip的脚本
2006/12/22 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
详解vue中axios的封装
2018/07/18 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
Python中的Numpy入门教程
2014/04/26 Python
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
python机器学习之神经网络实现
2018/10/13 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
python实现简单俄罗斯方块
2020/03/13 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
品质主管的岗位职责
2013/12/04 职场文书
军训自我鉴定
2013/12/14 职场文书
心得体会怎么写
2013/12/30 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
Oracle 多表查询基本语法实例
2022/04/18 Oracle