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操纵Cookie实现购物车程序
Nov 23 Javascript
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
原生js实现验证码功能
Mar 16 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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
Apache中php.ini的设置方法
2013/02/28 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
python代码编写计算器小程序
2020/03/30 Python
python检测服务器端口代码实例
2019/08/31 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
基于Python测试程序是否有错误
2020/05/16 Python
python实现学生通讯录管理系统
2021/02/25 Python
PyQt 如何创建自定义QWidget
2021/03/24 Python
企业活动策划方案
2014/06/02 职场文书
法人任命书范本
2014/06/04 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
五年级小学生评语
2014/12/26 职场文书
运动会广播稿200字
2015/08/19 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL