// 前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*div{
width: 200px;
height: 200px;
border: 1px solid red;
}*/
</style>
</head>
<body>
<input type="text" />
<button>发送</button>
<div></div>
<script type="text/javascript">
var inp = document.querySelector('input')
var but = document.querySelector('button')
var div = document.querySelector('div')
// 创建websocket
var socket = new WebSocket('ws://localhost:3000')
// 当和websocket连接成功时触发
socket.addEventListener('open', () => {
div.innerHTML = '连接服务成功'
})
// 主动给websocket服务发送消息
but.addEventListener('click', () => {
var val = inp.value
socket.send(val)
inp.value = ''
})
// 接受客户端信息
socket.addEventListener('message', (e) => {
console.log(e.data)
var data = JSON.parse(e.data)
var dv = document.createElement('div')
dv.innerText = data.msg + '------' + data.time
if (data.type === 0) {
dv.style.color = 'blue'
} else if (data.type === 1) {
dv.style.color = 'green'
} else {
dv.style.color = 'red'
}
div.append(dv)
})
// 服务器断开
socket.addEventListener('close', () => {
console.log('服务器断开')
div.innerHTML = '服务器断开'
})
</script>
</body>
</html>
// node 后端代码
const ws = require('nodejs-websocket')
console.log(ws)
const Port = 3000
let count = 0
const TYPE_IN = 0
const TYPE_OUT = 1
const TYPE_MSG = 2
const server = ws.createServer(connect => {
console.log(connect)
console.log('有用户链接上来了')
count++
connect.userName = `用户${count}`
/***
* type: 0 表示进入聊天室 1 表示正常 2表示离开聊天室
* msg 发给浏览器的消息
* time 时间
*/
broadcast({
type: TYPE_IN,
msg: `${connect.userName}进入聊天室`,
time: new Date().toLocaleTimeString()
})
// broadcast(`${connect.userName}进入聊天室`)
// 每当监听到用户传递过来的数据，这个text就会触发
connect.on('text', data => {
console.log('接受的用户数据:'+ data)
// broadcast(`${connect.userName}:${data}`)
broadcast({
type: TYPE_OUT,
msg: `${connect.userName}:${data}`,
time: new Date().toLocaleTimeString()
})
// 给当前用户一个响应数据
//connect.send(mes +'!!!')
})
// 只要websocket断开close事件就会触发
connect.on('close', () => {
count--
// broadcast(`${connect.userName}离开聊天室`)
broadcast({
type: TYPE_MSG,
msg: `${connect.userName}离开聊天室`,
time: new Date().toLocaleTimeString()
})
console.log('链接断开')
})
//注册一个error处理用户的错误信息
connect.on('error', () => {
console.log('用户连接异常')
})
})
// 广播给所有用户发消息
const broadcast = (msg) => {
// server.connections 表示所有的用户
server.connections.forEach(item => {
item.send(JSON.stringify(msg))
})
}
server.listen(Port, () => {
console.log('监听端口号' + Port)
})
