websocket原生开发聊天室
chat.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<meta name="viewport" content = "width=divice-width,initial-scale=1.0"/>
<title>Socket.IO chat</title>
<style>
/* div{
width:800px;
height:500px;
background-color: bisque;
border: darkkhaki;
} */
button { width: 9%; background: darksalmon; border: none; padding: 10px; }
</style>
</head>
<body>
<input type = 'text' placeholder="请输入你的内容" />
<button>Send</button>
<div></div>
</body>
</html>
<script>
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2
var div = document.querySelector('div')
var button = document.querySelector('button')
var input = document.querySelector('input')
//有了自己的server,就可以连接自己的server ws://echo.websocket.org
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){
var data = JSON.parse(e.data)
console.log(e.data)
//div.innerHTML = e.data
var dv = document.createElement('div')
dv.innerText = data.msg + '---' +data.time
if(data.type === TYPE_ENTER){
dv.style.color = 'green'
}else if(data.type === TYPE_LEAVE){
dv.style.color = 'red'
}else{
dv.style.color = 'blue'
}
div.appendChild(dv)
})
socket.addEventListener('close',function(){
div.innerHTML = '服务断开连接'
})
</script>
server.js
//导入node.js-websocket
const ws = require('nodejs-websocket')
const PORT = 3000
let count = 0 //连接上来的总的用户数量
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2
//创建一个server
//每次有用户连接，函数就会被执行，就会给用户创造一个连接对象conn
//每个用户都有一个conn
/*
为了让消息有格式，颜色这样，需要广播一个对象，
有type: 0--用户进入 1--用户离开 2--正常消息
*/
const server = ws.createServer(conn => {
console.log("an user connected.")
count ++
conn.username = `用户${count}`
//告诉所有用户，有人加入了聊天室
//broadcast(`${conn.username}进入了聊天室`)
broadcast({
type:TYPE_ENTER,
msg:`${conn.username}进入了聊天室`,
time:new Date().toLocaleTimeString()
})
conn.on('text',data => {
//我个人感觉，这个server.js就是自己实现那个url实现的功能
console.log("接收到了用户的数据",data)
//conn.send(data) //send只能给此用户发送
//connect.send(data.toUpperCase()+"!!!")
//broadcast(data)
broadcast({
type:TYPE_MSG,
msg:data,
time:new Date().toLocaleTimeString()
})
})
conn.on('close',() => {
console.log("连接断开了")
count --
//broadcast(`${conn.username}离开了聊天室`)
broadcast({
type:TYPE_LEAVE,
msg:`${conn.username}离开了聊天室`,
time:new Date().toLocaleTimeString()
})
})
conn.on('error',() => {
console.log("用户连接异常")
})
})
//广播 给所有的用户发送消息
function broadcast(msg){
//server.connections表示所有用户
server.connections.forEach(item => {
//send:只允许传字符串，现在要传的消息为一个对象，所以需要先转化为字符串
item.send(JSON.stringify(msg))
})
}
server.listen(PORT,() => {
console.log('websocket启动成功')
})
posted on
