xml地图|网站地图|网站标签 [设为首页] [加入收藏]

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

nodejs+websocket实时聊天系统,nodejswebsocket

1.本文属于改进版本哈

自己也是真的菜,一个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连接完毕")

简单的截图说明一下: 图片 1   图片 2

 

图片 3

 

开启服务,相同页面执行两遍,就可以聊天啦。 反正过程就是这样。 就是还有一个大的问题。比如我a断开连接了,只有b一个人在连接巨人b还能发信息,可以发信息算可以吧。居然b自己接收自己的信息。那就不能忍了。 图片 4

就是这种呀,逻辑都错乱了,理清逻辑是个费脑子的事情。有知道的同学吗?怎么处理呀

1.本文属于改进版本哈 自己也是真的菜,一个websocket简单聊天系统硬被我搞了那么些天。 看来以后...

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

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  连接以后:
图片 5

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

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

图片 6

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

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

 

 

实时聊天系统问题咨询,websocketnode.js 1.最近新学习websocket。做了一个实时聊天。用Node.js搭建的服务:serevr.js. 两个相互通信页...

该应用需求很简单,就是在web选项卡中打开两个网页,模拟两个web客户端实现聊天功能。

首先是客户端如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
{
margin: 0;
padding: 0;
}
.message{
width: 60%;
margin: 0 10px;
display: inline-block;
text-align: center;
height: 40px;
line-height: 40px;
font-size: 20px;
border-radius: 5px;
border: 1px solid #B3D33F;
}
.form{
width:100%;
position: fixed;
bottom: 300px;
left: 0;
}
.connect{
height: 40px;
vertical-align: top;
/
padding: 0; */
width: 80px;
font-size: 20px;
border-radius: 5px;
border: none;
background: #B3D33F;
color: #fff;
}
</style>
</head>
<body>
<ul id="content"></ul>
<form class="form">
<input type="text" placeholder="请输入发送的消息" class="message" id="message"/>
<input type="button" value="发送" id="send" class="connect"/>
<input type="button" value="连接" id="connect" class="connect"/>
</form>
<script></script>
</body>
</html>

var oUl=document.getElementById('content');
var oConnect=document.getElementById('connect');
var oSend=document.getElementById('send');
var oInput=document.getElementById('message');
var ws=null;
oConnect.onclick=function(){
ws=new WebSocket('ws://localhost:5000');
ws.onopen=function(){
oUl.innerHTML+="<li>客户端已连接</li>";
}
ws.onmessage=function(evt){
oUl.innerHTML+="<li>"+evt.data+"</li>";
}
ws.onclose=function(){
oUl.innerHTML+="<li>客户端已断开连接</li>";
};
ws.onerror=function(evt){
oUl.innerHTML+="<li>"+evt.data+"</li>";
};
};
oSend.onclick=function(){
if(ws){
ws.send(oInput.value);
}
}

这里使用的是w3c规范中关于HTML5 websocket API的原生API,这些api很简单,就是利用new WebSocket创建一个指定连接服务端地址的ws实例,然后为该实例注册onopen(连接服务端),onmessage(接受服务端数据),onclose(关闭连接)以及ws.send(建立连接后)发送请求。上面说了那么多,事实上可以看到html5 websocket API本身是很简单的一个对象和它的几个方法而已。

服务端采用nodejs,这里需要基于一个nodejs-websocket的nodejs服务端的库,它是一个轻量级的nodejs websocket server端的实现,实际上也是使用nodejs提供的net模块写成的。

server.js
var app=require('http').createServer(handler);
var ws=require('nodejs-websocket');
var fs=require('fs');
app.listen(80);
function handler(req,res){
fs.readFile(__dirname+'/client.html',function(err,data){
if(err){
res.writeHead(500);
return res.end('error ');
}
res.writeHead(200);
res.end(data);
});
}
var server=ws.createServer(function(conn){
console.log('new conneciton');
conn.on("text",function(str){
broadcast(server,str);
});
conn.on("close",function(code,reason){
console.log('connection closed');
})
}).listen(5000);

function broadcast(server, msg) {
server.connections.forEach(function (conn) {
conn.sendText(msg);
})
}

首先利用http模块监听用户的http请求并显示client.html界面,然后创建一个websocket服务端等待用户连接,在接收到用户发送来的数据之后将它广播到所有连接到的客户端。

下面我们打开两个浏览器选项卡模拟两个客户端进行连接,

本文由永利澳门平台发布于计算机资讯,转载请注明出处:websocket+node.js 实时聊天系统问题咨询,websocketnode.js

您可能还会对下面的文章感兴趣: