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