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. ...
随机推荐
- laydate日期插件弹出闪退和多次闪退问题解决
情况:点击第一个input 日期,可以正常选择日期,之后点击任何一个,都会闪一下然后消失,无法正常选择: 原因:lay-key的值的问题,需要循环重新为lay-key赋值 解决: <input ...
- .nett Core之路由配置
//配置路由 app.UseMvc(buider => { buider.MapRoute("Default", "{controller=home}/{actio ...
- java script 数组去重两种方法
第一种方法: var arr=[1,1,2,3,4,4,4,5,6,6,6,6]; var arrb=Array(); for(var i=0;i<arr.length;i++) ...
- Hbase的安装和部署
1.Zookeeper集群的正常部署并启动 $ /opt/modules/cdh/zookeeper-3.4.5-cdh5.3.6/bin/zkServer.sh start 2.Hadoop集群的正 ...
- cdq分治·三维偏序问题
转载自FlashHu大佬的博客CDQ分治总结(CDQ,树状数组,归并排序),在讲述部分有部分删改,用了自己的代码 CDQ分治的思想 CDQ分治是基于时间的离线分治算法.这一类分治有一个重要的思想——用 ...
- idea 启动异常xxxx.local: nodename nor servname provided, or not known
在host文件里面新增配置: 127.0.0.1 xxxx.local localhost 原文地址:https://www.jianshu.com/p/12e01fa9c69c
- 新版本Mongo4.0 新建用户
db.createUser( { user: “admin”, pwd: “xxx”, roles: [ { role: “userAdminAnyDatabase”, db: “admin” } ] ...
- Codeforces 1154B Make Them Equal
题目链接:http://codeforces.com/problemset/problem/1154/B 题意:给定数组,可以给任意的的元素加上D 或者 减去D,如果能 使数组元素都相等,输出最小的D ...
- 拾遗：Linux 用户及权限管理基础
Lacks of Knowledge 1: Linux has large amount of COMMANDS,but many of them have similar funtions,it's ...
- 9-MySQL高级-主从同步时Slave_IO_Running：Connecting ; Slave_SQL_Running：Yes的情况故障排除
推荐!! 各种情况都考虑在内,条理清楚!! https://blog.csdn.net/mbytes/article/details/86711508