app.js
const ws = require('nodejs-websocket')
//连接上来的总的用户的数量
let count = 0
const server = ws.createServer(conn=>{
console.log('新的连接')
count++
conn.userName = `用户${count}`
//告诉所有人,有人加入了聊天室
broadcast(`${conn.userName}进入了聊天室`)
//接收到了浏览器的数据
conn.on('text',data=>{
//当我们接收到某个用户的信息的时候,告诉所有用户,发送的消息内容是什么
broadcast(data)
})
//关闭连接
conn.on('close',data=>{
console.log('关闭连接')
count--
//告诉所有用户,有人离开了聊天室
broadcast(`${conn.userName}离开了聊天室`)
})
//发生异常
conn.on('error',data=>{
console.log('发生异常')
})
})
//给所有的用户发消息
function broadcast(msg){
server.connections.forEach(item=>{
item.send(msg)
})
}
server.listen(3000,()=>{
console.log('监听3000')
})
**
HTML
**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div{
height: 200px;
width: 200px;
border: 1px solid;
} */
</style>
</head>
<body>
<input type="text" placeholder="输入你的内容">
<button>发送请求</button>
<div></div>
<script>
var input = document.querySelector('input')
var button = document.querySelector('button')
var div = document.querySelector('div')
var socket = new WebSocket('ws://localhost:3000')
socket.addEventListener('open',function(){
div.innerHTML = '连接服务器成功了'
})
button.addEventListener('click',function(){
var value = input.value
socket.send(value)
input.value = ''
})
socket.addEventListener('message',function(e){
console.log(e.data)
var dv = document.createElement('div')
dv.innerText = e.data
div.appendChild(dv)
})
</script>
</body>
</html>