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 package.json中文文档
Sep 04 NodeJs
NodeJS配置HTTPS服务实例分享
Feb 19 NodeJs
Nodejs之TCP服务端与客户端聊天程序详解
Jul 07 NodeJs
详解nodejs中express搭建权限管理系统
Sep 15 NodeJs
nodejs 图片预览和上传的示例代码
Sep 30 NodeJs
nodejs操作mongodb的填删改查模块的制作及引入实例
Jan 02 NodeJs
NodeJS使用Range请求实现下载功能的方法示例
Oct 12 NodeJs
详解nodejs 开发企业微信第三方应用入门教程
Mar 12 NodeJs
nodejs中request库使用HTTPS代理的方法
Apr 30 NodeJs
纯异步nodejs文件夹(目录)复制功能
Sep 03 NodeJs
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
Nov 18 NodeJs
浅谈JS和Nodejs中的事件驱动
May 05 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
数据库相关问题
2006/10/09 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
浅谈php命令行用法
2015/02/04 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
Python实现修改IE注册表功能示例
2018/05/10 Python
python实现桌面壁纸切换功能
2019/01/21 Python
详解Python中is和==的区别
2019/03/21 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
Python实现播放和录制声音的功能
2020/08/12 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
美国眼镜网站:LensCrafters
2020/01/19 全球购物
知识就是力量演讲稿
2014/09/13 职场文书
学习十八大标语
2014/10/09 职场文书
求职导师推荐信范文
2015/03/27 职场文书