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. ...
随机推荐
- Vue.js 复选框
demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- vue v-for 组件传值 enter传值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- leetcood学习笔记-111-二叉树的最小深度
题目描述: 第一次提交: class Solution(object): def minDepth(self, root): """ :type root: TreeNo ...
- spring-helloworld (1)
目录 一.eclipse安装springsource-tools插件 二.新建maven工程,引入spring配置 三.添加helloworld类 四.使用springsource-tools插件 创 ...
- 6.RabbitMQ Linux安装
RabbitMQ在Linux上安装,需要很多依赖库,如何不能解决依赖库德版本问题,可能会比较麻烦,最好结合Yum进行安装,我这里使用的Linux环境是64位CentOS6.2 ,使用Yum源是阿里云的 ...
- shell设置时间递减脚本
经常要用shell来做时间的定时任务,尤其是用sqoop脚本拉取数据的时候,那么假如当你要导入数据是残缺的时候呢,我写了一个能自定义时间并逐条递减的程序 #!/bin/bash . /etc/pr ...
- iOS开发UIResponder之NSUndoManager
1.简介 UIResponder有个属性:NSUndoManager @property(nullable, nonatomic,readonly) NSUndoManager *undoManage ...
- HDU-1226-超级密码-队列+广搜+大数取模
Ignatius花了一个星期的时间终于找到了传说中的宝藏,宝藏被放在一个房间里,房间的门用密码锁起来了,在门旁边的墙上有一些关于密码的提示信息: 密码是一个C进制的数,并且只能由给定的M个数字构成,同 ...
- JVM 与 Linux 的内存关系详解
来源:美团技术团队 在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用大约800m. ...
- idea引入项目下所有文件（ps：包括静态文件夹）
打开项目的目录结构 点击finish 最后删除目录下多余的src就可以了