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. ...
随机推荐
- idea 在新建一个class的时候可以选择继承的父类
1.把光标放在父类名称上按alt+enter可以生成子类 2. 选中implement abstract class
- Zookeeper_ZAB协议
ZAB协议 ZAB协议简介 ZAB:(Zookeeper Atomic Broadcast),zk原子消息广播协议,是专为ZK设计的一中支持崩溃恢复的原子广播协议,是一种Paxos协议的优化算法,在Z ...
- MTT学习小记
这是个毒瘤题才有的毒瘤东西--奶一口NOI不考 拆系数FFT: 考虑做NTT时模数不是NTT模数(\(2^a*b+1\))怎么办? 很容易想到拆次数FFT. 比如说现在求\(a*b\),设\(m=\s ...
- js基础用法 ，基础语法
js用法: HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 <body> 和 <head& ...
- Android中的APK,TASK,PROCESS,USERID之间的关系
开发Android已经有一段时间了,今天接触到底层的东西,所以对于进程,用户的id以及Android中的Task,Apk之间的关系,要做一个研究,下面就是研究结果: apk一般占一个dalvik,一个 ...
- NX二次开发-UFUN删除链表函数UF_MODL_delete_list
NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_obj.h> #include <u ...
- Java-Class-C：org.springframework.http.HttpHeaders
ylbtech-Java-Class-C:org.springframework.http.HttpHeaders 1.返回顶部 1.1. import org.springframework.htt ...
- Socket心跳包异常检测的C语言实现，服务器与客户端代码案例
在Socket心跳机制中,心跳包可以由服务器发送给客户端,也可以由客户端发送给服务器,不过比较起来,前者开销可能较大.本文实现的是由客户端给服务器发送心跳包,服务器不必返回应答包,而是通过判断客户在线 ...
- day28-描述符应用与类的装饰器
#!/usr/bin/env python# -*- coding:utf-8 -*-# ------------------------------------------------------- ...
- 漏洞验证系列--MongoDB未授权访问
本系列文章旨在对于有一定网络安全基础的人员,在日常工作中扫描出来的各种漏洞,如何进行验证,以区分该漏洞是否存在或是扫描器误报.请勿应用非法途径. 本漏洞是由于MongoDB未设置访问权限,用户可以直接 ...