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、Python写的一个简易HTTP静态文件服务器
Jul 18 NodeJs
基于 Docker 开发 NodeJS 应用
Jul 30 NodeJs
轻松创建nodejs服务器(10):处理上传图片
Dec 18 NodeJs
nodejs和php实现图片访问实时处理
Jan 05 NodeJs
NodeJs测试框架Mocha的安装与使用
Mar 28 NodeJs
nodejs获取微信小程序带参数二维码实现代码
Apr 12 NodeJs
NodeJS实现不可逆加密与密码密文保存的方法
Mar 16 NodeJs
对mac下nodejs 更新到最新版本的最新方法(推荐)
May 17 NodeJs
NodeJs实现简单的爬虫功能案例分析
Dec 05 NodeJs
Nodejs实现的操作MongoDB数据库功能完整示例
Feb 02 NodeJs
nodejs实现的http、https 请求封装操作示例
Feb 06 NodeJs
用Nodejs实现在终端中炒股的实现
Oct 18 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
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
Move.js入门
2017/02/08 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
js实现数字滚动特效
2019/12/16 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
Python中的filter()函数的用法
2015/04/27 Python
Python ftp上传文件
2016/02/13 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
使用python实现对元素的长截图功能
2019/11/14 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
上课迟到检讨书100字
2014/01/11 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
学校元旦晚会方案
2014/02/19 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
观看焦裕禄观后感
2015/06/09 职场文书