nodejs+websocket实时聊天系统改进版
更新时间：2017年5月22日 10:00 点击：1696
本文属于nodejs+websocket实时聊天系统的改进版本，具体内容如下
自己也是真的菜，一个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连接完毕")
简单的截图说明一下：
开启服务，相同页面执行两遍，就可以聊天啦。反正过程就是这样。就是还有一个大的问题。比如我a断开连接了，只有b一个人在连接巨人b还能发信息，可以发信息算可以吧。居然b自己接收自己的信息。那就不能忍了。
就是这种呀，逻辑都错乱了，理清逻辑是个费脑子的事情。有知道的同学吗？怎么处理呀
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
上一篇: 微信小程序页面开发注意事项整理
相关文章
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码，有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要介绍了Nodejs回调加超时限制两种实现方法的相关资料,需要的朋友可以参考下...2017-06-15
- 本篇文章主要介绍了Nodejs中使用captchapng模块实现图片验证码，非常具有实用价值，需要的朋友可以参考下 ...2017-05-22
- 本篇文章主要介绍了nodejs 终端打印进度条实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-04-27
- 大家有没有遇到过在开启本地服务时，有这么一种情况：当前端口已经被另一个项目使用了，导致服务开启失败。那么接下来，我们通过简简单单的示例代码来检测端口是否已经被占用。有需要的朋友们可以参考借鉴。...2016-10-02
- 这篇文章主要介绍了Nodejs学习item【入门手上】,需要的朋友可以参考下...2016-05-09
- 本文给大家一起探讨nodejs下dns的缓存问题，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧...2016-11-22
- 这篇文章主要介绍了Nodejs 数组的队列以及forEach的应用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-25
Nodejs express框架一个工程中同时使用ejs模版和jade模版
这篇文章主要介绍了Nodejs express框架一个工程中同时使用ejs模版和jade模版 的相关资料,需要的朋友可以参考下...2015-12-29- 本篇文章主要介绍了详解Windows下安装Nodejs步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-22
- 本篇文章主要介绍了Nodejs基于mongoose模块的增删改查的操作，Mongoose是MongoDB的一个对象模型工具，封装了MongoDB对文档的的一些增删改查等常用方法，让NodeJS操作Mongodb数据库变得更加灵活简单。 ...2016-12-31
- 这篇文章主要介绍了NODE.JS如何根据URL返回指定的图片详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-21
- 在Node.js中使用jQuery的做法，需要先安装jquery，npm install jquery ,安装后的版本是 3.1.0,本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看下吧...2016-08-24
- 这篇文章主要介绍了NodeJS 实现手机短信验证模块阿里大于功能,需要的朋友可以参考下...2017-06-24
- 这篇文章给大家介绍了如何利用Node.Js处理post数据，文中通过实例和图文介绍的很详细，有需要的小伙伴们可以参考借鉴，下面来一起看看吧。...2016-10-03
- 本文主要介绍了nodejs基础知识。具有很好的参考价值，下面跟着小编一起来看下吧...2017-02-08
- 这篇文章主要介绍了NodeJs并发异步的回调处理的相关资料,需要的朋友可以参考下...2015-12-24
- 这篇文章主要给大家介绍了关于nodejs利用readline提示输入内容的相关资料,Readline是Node.js里实现标准输入输出的封装好的模块,通过这个模块我们可以以逐行的方式读取数据流,需要的朋友可以参考下...2021-07-15
- Node.js是一个Javascript运行环境(runtime)。本文给大家介绍Node.js+Express配置入门教程，值得推荐给大家，感兴趣的朋友一起学习吧...2016-05-20
- 这篇文章主要为大家详细介绍了NodeJS实现图片文本分割，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-06