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是 ...
随机推荐
-
Excel 回归分析
1 分析两个变量和一个因变量的关系 降水,温度与生长的关系曲线 降水是连续的数,温度有三个温室,每个温室一个温度,生长也是连续的数. 作图的方法是将降水放在一列,然后生长根据温度放三列,同一个温度的放 ...
-
Excel公式错误提示啥意思？
1.#####!返回的结果超出了单元格的宽度:或者单元格的日期时间公式产生了一个负值. 2.#VALUE!使用了错误的参数或运算对象类型. 3.#DIV/O!当公式被零除时产生此错误. 4.#NAME ...
-
让aspx页面也可以通过url路由进行访问
参考文章:http://blog.csdn.net/zhanglong_longlong/article/details/8841030 这两天,在工作中需要将aspx的页面虚拟成url路径访问.比如 ...
-
css清除浮动的几种方法整理
四种清除浮动方法如下: 1.使用空标签清除浮动.空标签可以是div标签,也可以是P 标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签 清除浮动,并为其定义CSS代码:cle ...
-
NET异步调用Webserver
之前,有个同事跑来问我一堆的什么多线程异步进行调用Sap的服务再突然把进程关闭,还说要设置一个循环判断调用的结果,搞得我听的一头雾水,但是我明显感觉到他的设计思路已经渐行渐远了...已经再偏远的山区中 ...
-
mojo 默认启用utf-8
[root@dr-mysql01 ~]# cat f1.pl use Encode; print "验证111\n"; my $d=encode_utf8('验证'); print ...
-
Java多线程编程核心技术（一）
先提一下进程,可以理解为操作系统管理的基本单元. 而线程呢,在进程中独立运行的子任务.举个栗子:QQ.exe运行时有很多子任务在同时运行,比如好友视频线程.下载视频线程.传输数据线程等等. 多线程的优 ...
-
（二 -0） 天猫精灵接入Home Assistant-安装MQTT服务器
ubuntu 1604 阿里云 学生版轻型服务器 1 安装MQTT 进入官网 http://emqtt.com/ 点击下载 找到 ubuntu 1604 右键-复制链接 粘贴办理内容是下载链接第 ...
-
2016-06-19 exshop第5天
昨天对grails3和spring-security进行了全面的调研并进行了试验,试用下来发现grails3的启动速度.代码修改后刷新速度.内存占用以及架构的设计上更加合理,asset-pipelin ...
-
trace-cmd使用方法
使用trace-cmd有的时候没有来得及使用ctrl+c, 导致出现多个trace.dat.cpu*, 可以使用下面的办法来手动合并trace.dat If a crash happened on a ...