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 相关文章推荐
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 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调用Oracle存储过程
2006/10/09 PHP
php下连接mssql2005的代码
2011/01/17 PHP
php数组一对一替换实现代码
2012/08/31 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
在小程序中使用canvas的方法示例
2018/09/17 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
pandas重新生成索引的方法
2018/11/06 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
基于Python实现简单学生管理系统
2020/07/24 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
校园安全演讲稿
2014/05/09 职场文书
社区党支部承诺书
2015/04/29 职场文书
2015年网管个人工作总结
2015/05/22 职场文书