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 相关文章推荐
JQuery 文本框使用小结
May 22 Javascript
js弹出对话框方式小结
Nov 17 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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对象类型判断
2008/08/27 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
JS 自定义带默认值的函数
2011/07/21 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
python实现两个文件合并功能
2018/04/01 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
keras中的History对象用法
2020/06/19 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
大学军训感想
2014/02/12 职场文书
英文请假条
2014/04/11 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
教师自我剖析材料
2014/09/29 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
琅琊山导游词
2015/02/05 职场文书
python实现简单反弹球游戏
2021/04/12 Python
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
nginx共享内存的机制详解
2022/03/21 Servers