nodejs与websocket模拟简单的聊天室
nodejs与websocket模拟简单的聊天室
server.js
const http = require('http')
const fs = require('fs')
var userip
var server = http.createServer((req,res)=>{
res.writeHead(200,{'Content-Type':'text/html;charset=utf8'})
res.end(fs.readFileSync('./index.html'))
userip = req.connection.remoteAddress
userip = userip.replace('10.9.166.','')
})
//socket
const Server = require('ws').Server
//建立好了服务端
var wss = new Server({server})
//存放前端连接的socket
var clientMap = {}
var count = 0
var id = 0
//当客户端连接上的就会触发，回调会接收一个socket对象
wss.on("connection",function (socket) {
count++
id++
socket.id = id
clientMap[socket.id] = socket
socket.nickname = '好友'
console.log(`现在有${count}人连接了`)
broadClients(socket.nickname,1)
//当这个客户端发送数据的时候会触发
socket.on("message",function (msg) {
//console.log(`客户端${socket.id} 说：${msg}`)
let info = JSON.parse(msg)
if(socket.nickname!=info.nickname){
socket.nickname = info.nickname
broadClients()
}
socket.nickname = info.nickname
broadcast(socket,info.msg)
})
//当客户端断开的时候触发
socket.on("close",function () {
//console.log(`客户端${socket.id} 说：${msg}`)
count--
let nickname = socket.nickname
delete clientMap[socket.id]
broadClients(nickname,2)
})
//当客户端连接出错的时候
socket.on("error",function (err) {
console.log(err)
})
})
//广播函数，像所有的客户端发送某一个客户端说的话
function broadcast(socket,msg) {
let info = {nickname:socket.nickname+userip,msg:msg,type:'msg'}
for(var id in clientMap){
info.isMe = socket.id==id?'true':false
clientMap[id].send(JSON.stringify(info))
}
}
function broadClients(nickname,type) {
let clients = []
for(var id in clientMap){
clients.push(clientMap[id].nickname)
}
for(var id in clientMap){
clientMap[id].send(JSON.stringify({
count,clients,
type:'count',
nickname:nickname+userip,
_type:type
}))
}
}
server.listen(2000,'10.9.166.56')
index.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>wechat</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
html,body{
height: 100%;
display: flex;justify-content: center;align-items: center;
}
#room{
width: 600px;
height: 600px;
position: relative;
}
#room .panel-body{
padding: 0;
}
#room .content{
height: 460px;overflow-y: auto;
padding: 10px;
background: #fff;
}
#room .control-box{
height: 90px;
padding: 10px;
display: flex;
flex-wrap: nowrap;
align-items: center;
}
#room .control-box .btn{
margin: 0px 15px;
}
.list-group-item{
border: none;
}
.list-group-item.other span:after{
content: ':';
display: inline-block;
margin: 0px 3px;
}
.list-group-item.me span:before{
content: ':';
display: inline-block;
margin: 0px 3px;
}
.list-group-item.me{
display: flex;
align-items: center;
flex-direction: row-reverse;
}
.numbers{
position: absolute;
width: 150px;
top:0;left: -150px;
}
.numbers .online,.numbers .clients{
width: 80%;
margin-left: 10%;
}
.numbers .clients{
margin-top: 15px;
height: 400px;
overflow: auto;
}
.p-info{
font-size: 12px;
color: rgb(172, 170, 170);
}
</style>
<body>
<div id="room" class="panel panel-primary">
<div class="panel-heading clearfix">
wechat
<input id="nickname" placeholder="昵称，默认为好友" style="width:200px;" type="text" class="form-control pull-right">
</div>
<div class="panel-body">
<div class="content">
<ul class="list-group msgs"></ul>
</div>
<div class="control-box">
<input id="word" type="text" class="form-control">
<button id="send" class="btn btn-success">发送</button>
</div>
</div>
<div class="numbers">
<button class="btn btn-info online">
在线人数：<span class="count"></span>
</button>
<ul class="list-group clients">
</ul>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
//创建客户端的连接socket
var wsc = new WebSocket('ws://10.9.166.56:2000');
wsc.onopen = function (e) {//当客户端连接上的时候就会触发
//console.log('我已经连接上服务端了')
};
wsc.onmessage = function (e) {//当服务端返回消息的时候触发
// console.log(e.data);
let info = JSON.parse(e.data)
switch(info.type){
case 'msg':
handleMsg(info);break;
case 'count':
handleCount(info);break;
}
};
function handleMsg(info) {
let str = `
<li class="list-group-item ${info.isMe?'me':'other'}">
<span>${info.nickname}</span>
<button class="btn btn-success">${info.msg}</button>
</li>
`
let li = $(str)
$(".msgs").append(li)
li[0].scrollIntoView()
word.value = ''
}
function handleCount(info) {
$(".count").html(info.count)
var str = ''
info.clients.forEach(item => {
str+='<li class="list-group-item list-group-item-info text-center">'+item+'</li>'
});
$(".clients").html(str)
//如果有人来或者有人走，需要报一个消息
if(info.nickname&&info._type){
$(".msgs").append('<p class="p-info text-center">'+info.nickname+(info._type==1?'加入群聊':'离开群聊')+'</p>')
}
}
$("#send").click(function () {
send()
})
$("#word").keyup(function (e) {
if(e.keyCode==13){
send()
}
})
function send() {
var nickname = $("#nickname").val() || '好友'
var msg = $("#word").val()
var reg = /<[^>]+>/g
if(msg!=''){
if(!reg.test(msg)&&!reg.test(nickname)){
wsc.send(JSON.stringify({nickname:nickname,msg:msg}))
}else{
alert('输入框内请勿输入非法字符')
}
}else{
alert('发送内容不能为空，请重新输入')
}
}
var canUse = true
wsc.onclose = function (e) {//当服务端关闭的时候触发
// alert('聊天服务已经关闭了')
canUse = false
};
wsc.onerror = function (e) {//错误情况触发
console.log(e)
}
</script>
</html>
在终端中输入node server即可运行服务器，在浏览器输入你的IP地址+端口号
这里我的ip地址是10.9.166.56，端口号是2000，改成你的ip地址，即可开始运行，赶紧运行，和你的朋友聊起来吧
nodejs与websocket模拟简单的聊天室的更多相关文章
- 基于websocket实现的一个简单的聊天室
本文是基于websocket写的一个简单的聊天室的例子,可以实现简单的群聊和私聊.是基于websocket的注解方式编写的.(有一个小的缺陷,如果用户名是中文,会乱码,不知如何处理,如有人知道,请告知 ...
- 简单的聊天室代码php+swoole
php swoole+websocket 客户端代码 <!DOCTYPE html> <html> <head> <title></title&g ...
- Node.js+websocket+mongodb实现即时聊天室
ChatRoom Node.js+websocket+mongodb实现即时聊天室 A,nodejs简介:Node.js是一个可以让javascript运行在服务器端的平台,它可以让javascrip ...
- 玩转Node.js（四）-搭建简单的聊天室
玩转Node.js(四)-搭建简单的聊天室 Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制.我便看了一 ...
- HTML5新特性 websocket(重点)--多对多聊天室
一.html5新特性 websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...
- FastAPI（56）- 使用 Websocket 打造一个迷你聊天室
背景 在实际项目中,可能会通过前端框架使用 WebSocket 和后端进行通信 这里就来详细讲解下 FastAPI 是如何操作 WebSocket 的 模拟 WebSocket 客户端 #!usr/b ...
- 如何利用WebSocket实现网页版聊天室
花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo,期间还走过了一段"看似弯曲"的道路,但是我想其实也不算是弯路吧,因为你走过的路必将留下你的足迹.这 ...
- ASP.NET Signalr 2.0 实现一个简单的聊天室
学习了一下SignalR 2.0,http://www.asp.net/signalr 文章写的很详细,如果头疼英文,还可以机翻成中文,虽然不是很准确,大概还是容易看明白. 理论要结合实践,自己动手做 ...
- [SignalR]一个简单的聊天室
原文:[SignalR]一个简单的聊天室 1.说明 开发环境:Microsoft Visual Studio 2010 以及需要安装NuGet. 2.添加SignalR所需要的类库以及脚本文件: 3. ...
随机推荐
- Python 分布式锁
1,数据一致性 当多个进程/线程对同一个共享资源读写,会因为资源的争夺而出现混乱,导致数据不一致. 如下图: 在数据库的原始数据是 d0,上图的处理流程如下: t1 时刻,有两个数据源的数据 d1,d ...
- leetcode-263-丑数一
题目描述: 方法一:递归 class Solution: def isUgly(self, num: int) -> bool: if num == 0: return False if num ...
- Java——super关键字
2.3 super关键字 ①super不是引用类型,super中存储的不是内存地址,super指向的不是父类对象. ②super代表的是当前子类对象中的父类型特征. ③什么时候使用super? 类和父 ...
- 阿里云成为Hyperledger超级账本全球会员，发力区块链生态建设
摘要: 阿里云将会与Hyperledger社区共同推进全球区块链技术和商业生态在多行业领域的建设. 2018年12月12日在瑞士巴塞尔的2018Hyperledger全球峰会上,阿里云正式加入Hype ...
- SCOI 2014 省选总结
总的来说作为高一党,去做省选难度的题完全就是去玩的,还是找惯例起身跪hja. 跪毕,看看自己惨不忍睹的成绩,我只想说:电子坑大为什么day1的暴力只有10分!为什么呢?我笑看题面: 方伯伯种玉米,方伯 ...
- 代码格式化工具---prettier配置
我自己的常用 prettier 配置如下: // .prettierrc 文件 // 这里修改的都是与默认值不同的,没有修改到的就是启用默认值 // .prettierrc 文件是使用 json 格式 ...
- NX二次开发-UFUN工程图初始化视图信息UF_DRAW_initialize_view_info
NX9+VS2012 #include <uf.h> #include <uf_draw.h> #include <uf_obj.h> #include <u ...
- Codeforces 1154B Make Them Equal
题目链接:http://codeforces.com/problemset/problem/1154/B 题意:给定数组,可以给任意的的元素加上D 或者 减去D,如果能 使数组元素都相等,输出最小的D ...
- Java High Level REST Client 中文API（仅供参考）
1.初始化 兼容性 Java High Level REST Client需要Java 1.8,并依赖于Elasticsearch核心项目,客户端版本与客户端开发的Elasticsearch版本相同, ...
- 19-Ubuntu-文件和目录命令-删除文件和目录-rm
rm 删除文件或目录 注:使用rm命令要小心,因为文件删除后不能恢复.不会放在垃圾箱里,直接从磁盘删除. 选项 含义 -f 强制删除文件,无需提示.不能删除目录! -r 递归的删除目录下的内容,删除文 ...