websocket+node.js实现实时聊天系统问题咨询


Posted in Javascript onMay 17, 2017

1.最近新学习websocket。做了一个实时聊天。用Node.js搭建的服务:serevr.js. 两个相互通信页面:client.html 和server.html

但是就是有很多问题,想让知道的人帮我看看哈:

我先把代码贴出来:

server.js:

var ws=require("nodejs-websocket");
 console.log("开始建立连接...");
 var str1=null,str2=null, clientReady=false,serverReady=false;
 var server=ws.createServer(function(conn){
   conn.on('text',function(str){
     console.log(str);
     /**
      * 用户小雨第一次连接
      */
    if(str==="小雨"){
       str1=conn;
       clientReady=true;
       str1.sendText("欢迎"+str); 
    }
    /**
     * 用户小乔第一次连接
     */
    if(str==="小乔"){
       str2=conn;
       serverReady=true;
      str2.sendText("欢迎"+str);
    }
    /**
     * 当有第二个用户连接时。
     */
     if(clientReady&&serverReady){
      str2.sendText(str);
      str1.sendText(str);
    }
   })
   conn.on("close",function(code,reason){
     console.log("关闭连接");
   })
   conn.on("error",function(code,reason){
     console.log("异常关闭")
   });
 }).listen(8082);
 console.log("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" value="小雨" readonly/>
  <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 name=document.getElementById("name").value;
    var mess=document.getElementById("mess");
    var value1=document.getElementById("value1");
    var conn= document.getElementById("conn");
    var close=document.getElementById("close");
    close.disabled=true;
    if(window.WebSocket){
     conn.onclick=function(){
      var ws=new WebSocket('ws://127.0.0.1:8082');
      conn.disabled=true;
      close.disabled=false; 
       ws.onopen=function(e){
          console.log("连接服务器成功"); 
           ws.send(name);
      } 
    ws.onmessage=function(e){
      var time=new Date();
      mess.innerHTML+=time.toUTCString()+":"+e.data+"<br>";
      document.getElementById("send").onclick=function(e){
        ws.send(name+"说:"+value1.value);
        value1.value=" ";
      }
      document.onkeydown = function(e) {
        e = e || window.event;
        if(e.keyCode == 13) {
           document.getElementById("send").onclick();
          return false;
        }
      }  
    }
    /**
     * 客户端主动断开连接
     * 
     * **/ 
    close.onclick=function(){
      ws.onclose();
      conn.disabled=false;
      close.disabled=true; 
    }  
     ws.onclose = function(e){
       console.log("服务器关闭");
     } 
    ws.onerror = function(){
      console.log("连接出错");
    }
    }  
  }
  </script>
</body>
</html>

server.html 页面和client.html的代码一样,就是用户名字换成小乔啦。

接下来就是问题啦:

1.运行界面:

  client.html  连接以后:

websocket+node.js实现实时聊天系统问题咨询

本来服务器只需要回传一个欢迎小雨的,然后下面还输出了一个。

server.html  小乔连接以后也出来了一个小乔,按理是欢迎小乔。然后告诉小乔小雨在线了。

websocket+node.js实现实时聊天系统问题咨询

2.两个页面代码一样,但是就是不能只变成一个页面,硬要两个才能聊天。

3.server.js那边逻辑有点问题,一直理不清楚。

以上所述是小编给大家介绍的websocket+node.js实现实时聊天系统问题咨询,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
JavaScript实现区块链
Mar 14 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
JavaScript简单拖拽效果(1)
May 17 #Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 #Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 #Javascript
Vue.js鼠标悬浮更换图片功能
May 17 #Javascript
12个非常有用的JavaScript技巧
May 17 #Javascript
Javascript中的async awai的用法
May 17 #Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 #Javascript
You might like
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
开启PHP的伪静态模式
2015/12/31 PHP
php数组指针操作详解
2017/02/14 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Python threading的使用方法解析
2019/08/28 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
介绍一下Linux文件的记录形式
2013/09/29 面试题
行政总经理岗位职责
2013/12/05 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
购房委托书
2014/10/15 职场文书
2015年科普工作总结
2015/07/23 职场文书
Django程序的优化技巧
2021/04/29 Python
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
一行Python命令实现批量加水印
2022/04/07 Python