nodejs加WebSocket,聊天工具
1、WebSocket必须要与服务器连接，所以这里采用node起服务，这里用到了ws，，也有人用nodejs-websocket
2、首先
npm install ws
3、新建一个server.js 文件,用来起服务，代码如下
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 8181 });
//var client1 = null,client2=null,client1Ready = false, client2Ready = false;
var config = {
client1:{
Ready:false,
pipe:null
},
client2:{
Ready:false,
pipe:null
},
client3:{
Ready:false,
pipe:null
},
client4:{
Ready:false,
pipe:null
},
}
wss.on('connection', function (ws) {
console.log('client connected');
ws.on('message', function (message) {
if(config[message]){
config[message]["Ready"] = true;
config[message]["pipe"] = ws;
}else{
var data = JSON.parse(message);
if(config[data.send]["Ready"] && config[data.receive]["Ready"] ){
ws.send(message);
config[data.receive]["pipe"].send(message);
}else{
ws.send(JSON.stringify({"error":true}));
}
}
});
ws.on("close",function(code, reason){
for(var i in config){
if(config[i].pipe === ws){
config[i].Ready = false;
config[i].pipe = null;
break;
}
}
console.log("关闭链接");
});
});
//npm install ws
4、新建一个client1.html, 客户端，注意文件中引入了jquery，自己改一下文件路径吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>女汉子</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-family: "微软雅黑";
}
#chat{
width: 600px;
height: 400px;
margin: 50px auto;
border: 4px solid yellowgreen; }
p{
font-size: 16px;
color: #9ACD32;
padding: 0 20px;
}
#chat p.send{
text-align: left;
color: deeppink;
}
#chat p.receive{
text-align: right;
}
.btn{
text-align: center;
}
.showState{
text-align: center;
}
.showInfo{
text-align: center;
}
</style>
</head>
<body>
<div class="showState">正在链接..</div>
<div class="showInfo"></div>
<div id="chat"> </div>
<div class="btn">
<input type="text" name="message" id="message" value="" />
<button onclick="sendMessage()">发送</button>
</div> </body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var config = {
"send":"client1",
"receive":"client2",
"sendNike":"女汉纸",
"receiveNike":"屌丝青年"
}
var mes = document.getElementById("message");
var box = $("#chat");
var chatWith = $(".showInfo");
var showState = $(".showState");
var ws = new WebSocket("ws://localhost:8181");
ws.onopen = function (e) {
ws.send(config.send);
showState.html("链接成功!");
chatWith.html("你正在和:"+ config.receiveNike + "聊天");
}
function sendMessage() {
var mesage = {
"send":config.send,
"receive":config.receive,
"message":mes.value,
"sendNike":config.sendNike,
};
var str = JSON.stringify(mesage);
ws.send(str);
}
ws.onmessage=function (e) {
create(JSON.parse(e.data));
}; function create(data){
if(data.error){
alert("发送失败,对方不在线!");
}else{
if(data.send == config.send ){
box.append("<p class='send'>"+ config.sendNike+":" +data.message +"</p>");
}else{
box.append("<p class='receive'>"+ data.sendNike+":" + data.message +"</p>");
} } } </script>
</html>
5、再新建一个client2.html文件， 客户端，注意文件中引入了jquery，自己改一下文件路径吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屌丝青年</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-family: "微软雅黑";
}
#chat{
width: 600px;
height: 400px;
margin: 50px auto;
border: 4px solid yellowgreen; }
p{
font-size: 16px;
color: #9ACD32;
padding: 0 20px;
}
#chat p.send{
text-align: left;
color: deeppink;
}
#chat p.receive{
text-align: right;
}
.btn{
text-align: center;
}
.showState{
text-align: center;
}
.showInfo{
text-align: center;
}
</style>
</head>
<body>
<div class="showState">正在链接..</div>
<div class="showInfo"></div>
<div id="chat"> </div>
<div class="btn">
<input type="text" name="message" id="message" value="" />
<button onclick="sendMessage()">发送</button>
</div> </body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var config = {
"send":"client2",
"receive":"client1",
"sendNike":"屌丝青年",
"receiveNike":"女汉纸"
} var mes = document.getElementById("message");
var box = $("#chat");
var chatWith = $(".showInfo");
var showState = $(".showState");
var ws = new WebSocket("ws://localhost:8181");
ws.onopen = function (e) {
ws.send(config.send);
showState.html("链接成功!");
chatWith.html("你正在和:"+ config.receiveNike + "聊天");
}
function sendMessage() {
var mesage = {
"send":config.send,
"receive":config.receive,
"message":mes.value,
"sendNike":config.sendNike,
};
var str = JSON.stringify(mesage);
ws.send(str);
}
ws.onmessage=function (e) {
create(JSON.parse(e.data));
}; function create(data){
if(data.error){
alert("发送失败,对方不在线!");
}else{
if(data.send == config.send ){
box.append("<p class='send'>"+ config.sendNike+":" +data.message +"</p>");
}else{
box.append("<p class='receive'>"+ data.sendNike+":" + data.message +"</p>");
} } } </script>
</html>
6、先执行node server,服务跑起来，（注意：服务不跑起来，是无法聊天的）
运行：client1.html和client2.html
7、开始聊天
代码地址：https://gitee.com/muand/websocket.git
nodejs加WebSocket,聊天工具的更多相关文章
- nodejs+websocket聊天工具
该聊天工具,使用nodejs起服务,websocket前端页面,聊天工具,,可以有任意多的人数参与聊天,里面的用户ID为模拟ID. 先上图 文件夹结构, 1.安装ws模块,npm install ws ...
- nodejs+mongoose+websocket搭建xxx聊天室
简介 本文是由nodejs+mongoose+websocket打造的一个即时聊天系统:本来打算开发一个类似于网页QQ类似功能的聊天系统,但是目前只是开发了一个模块功能 --- 类似群聊的,即一对多的 ...
- 基于Nodejs开发的web即时聊天工具
由于公司需要开发web即时聊天的功能,开始时我们主要的实施方法是用jquery的ajax定时(10秒)轮询向服务器请求,由于是轮询请求,对 服务器的压力比较大.我们网站上线的时间不长,访问量不是很大, ...
- nodejs与websocket模拟简单的聊天室
nodejs与websocket模拟简单的聊天室 server.js const http = require('http') const fs = require('fs') var userip ...
- h5聊天工具的开发过程及思路
这个产品的主要技术栈有,网易nim即时通信,vue-cli,muse-ui 1.在拿到这个需求时,脑袋里空的,什么想法都没有,完全懵逼,进了网易云通信的官网api查看,由于我做的是客户端的,所以重点看 ...
- Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试
Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试一.下载相关安装包 1.下载nginx最新版本(nginx1.3.13版之后才支持websocket协议) 下载地址 ...
- Python3 实现简易局域网视频聊天工具
Python3 实现简易局域网视频聊天工具 1.环境 操作系统为 Ubuntu 16.04 python 3.5opencv-python 3.4.1.15numpy 1.14.5PyAudio ...
- 基于nodejs的websocket通信程序设计
网络程序设计无疑是nodejs + html最好用 一.nodejs的安装 1.在ubuntu上的安装 sudo apt install nodejs-legacy sudo apt install ...
- 使用.NET Core和Vue搭建WebSocket聊天室
博客地址是:https://qinyuanpei.github.io. WebSocket是HTML5标准中的一部分,从Socket这个字眼我们就可以知道,这是一种网络通信协议.WebSocket是 ...
随机推荐
- 原生js--http请求
1.终止请求和超时 终止请求XMLHttpRequest对象提供abort方法,调用该方法时触发abort事件 XHR2提供了timeout属性,当超时发生时触发timeout事件.但浏览器尚不支持自 ...
- EGL 1.0 学习笔记
http://hi.baidu.com/leo_xxx/item/b01b1fc29abff355ac00ef5c 基本概念 EGL是OpenGL ES与本地Window系统之间的桥梁.EGL创建渲染 ...
- rabbitmq在centos 7上的安装
一.安装步骤 参考了官网文档: http://www.rabbitmq.com/install-rpm.html#package-dependencies 这里大概介绍下. rabbitmq-serv ...
- 生产环境mysql的参数设置不一样，好好的程序，又出错
一.概述 报错信息如下: org.springframework.jdbc.BadSqlGrammarException: ### Error querying database. Cause: c ...
- Linux下进程隐藏的方法及其对抗
零.背景 在应急响应中,经常碰到ps命令和top命令查不到恶意进程(异常进程)的情况,会对应急响应造成很大的影响.轻则浪费时间,重则排查不出问题,让黑客逍遥法外.所以这篇博客研究学习如何对抗linux ...
- 【BZOJ4036】[HAOI2015]按位或 FWT
[BZOJ4036][HAOI2015]按位或 Description 刚开始你有一个数字0,每一秒钟你会随机选择一个[0,2^n-1]的数字,与你手上的数字进行或(c++,c的|,pascal的or ...
- 【CF932F】Escape Through Leaf 启发式合并set维护凸包
[CF932F]Escape Through Leaf 题意:给你一棵n个点的树,每个点有树形ai和bi,如果x是y的祖先,则你可以从x花费$a_x\times b_y$的费用走到y(费用可以为负). ...
- 算法学习之冒泡排序的C实现
冒泡排序是属于比较类的排序方式,简单易懂,但是效率不是很高,不及快排. #include "stdio.h" #include "time.h" void bu ...
- 7.20python线程(2)
RLock 递归锁 线程事件
- 在 CSS 中，width 和 height 指的是内容区域的宽度和高度
增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸. 改变宽度就可以,去掉