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是 ...
随机推荐
- 日记整理---->2016-11-21
2016-11-21简单的总结一下学到的知识点.作为一个目标而存在的东西,总是那么美丽而优雅. 一.PE中事务的编写 getTransactionTemplate().execute(new Tran ...
- vue经验 - 实战疑点总结
1.注册全局组件(是一个单vue页面组成的一个组件,而不是现拼的template结构) 结构: 代码:main.js import UserList from './components/UserLi ...
- Android 验证APK是否已经签名或是否是Debug签名
https://source.android.google.cn/ http://www.android-doc.com/tools/publishing/app-signing.html Signi ...
- 调用office COM出现不会退出的问题
症状 在使用.net调用 Microsoft Office 应用程序时,Office 应用程序在调用Quit方法时不会退出. 原因 Visual Studio.NET 从托管代码调用 COM 对象时, ...
- android 设置系统屏幕亮度
/** * 获得当前屏幕亮度的模式 * SCREEN_BRIGHTNESS_MODE_AUTOMATIC=1 为自动调节屏幕亮度 * SCREEN_BRIGHTNESS_MODE_MANUAL=0 为 ...
- nginx socket转发设置
1.添加依赖模块,如下 --with-stream --with-stream_ssl_module 2.nginx.conf 配置,参考说明:ngx_stream_core_module user ...
- yii---模型的创建
在 model/ 路径新建 Test.php 模型 我们类的名称一定要与数据表的名称相同. 继承 yii\db\ActiveRecord 类: 在模型类中 声明 tableName() 指定表名 // ...
- C++虚函数virtual，纯虚函数pure virtual和Java抽象函数abstract，接口interface与抽象类abstract class的比较
由于C++和Java都是面向对象的编程语言,它们的多态性就分别靠虚函数和抽象函数来实现. C++的虚函数可以在子类中重写,调用是根据实际的对象来判别的,而不是通过指针类型(普通函数的调用是根据当前指针 ...
- android 常见内存泄漏原因及解决办法
android常见内存泄漏主要有以下几类: 一.Handler 引起的内存泄漏. 在Android开发中,我们经常会使用Handler来控制主线程UI程序的界面变化,使用非常简单方便,但是稍不注意,很 ...
- Centos7搭建vsftp服务器
环境查看 安装vsftp软件 yum -y install vsftpd 修改配置文件/etc/vsftpd/vsftpd.conf (其余配置保持默认即可) anonymous_enable=NO ...