基本页面
<body>
<input type="text" name="" id="" placeholder="请输入你的内容">
<button>发送请求</button>
<div></div>
</body>
由于h5内部提供了webscoket 的api 所以可直接使用
var scoket = new WebSocket('ws://localhost:3000')
//var ws = new WebSocket("wss://echo.websocket.org")官方给的
//连接服务时立即触发
scoket.addEventListener('open',function(){
div.innerHTML='连接服务成功了'
})
//自己封装的
前端代码
<body>
<input type="text" name="" id="" placeholder="请输入你的内容">
<button>发送请求</button>
<div></div>
</body>
<script>
var input = document.querySelector('input')
var button = document.querySelector('button')
var div = document.querySelector('div')
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2
var scoket = new WebSocket('ws://localhost:3000')
scoket.addEventListener('open',function(){
div.innerHTML='连接服务成功了'
})
button.addEventListener('click',function(){
var value = input.value
scoket.send(value)
input.value=''
})
scoket.addEventListener('message',function(e){
console.log(e.data)
var data = JSON.parse(e.data)
// div.innerHTML=e.data
var dv = document.createElement('div')
dv.innerHTML= 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='pink'
}
div.appendChild(dv)
})
scoket.addEventListener('close', function(){
div.innerHTML='服务断开连接'
})
</script>
webscoket端服务
const ws = require('nodejs-websocket') //导入websocket包
const PORT=3000
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2
//用来记录用户连接总的数量
let count = 0
// conn 每个连接到服务器的对象都会有一个conn
const server = ws.createServer(conn => {
console.log( '有用户连接上来了')
count++
conn.userName=`用户${count }`
broadcast({
type:TYPE_ENTER,
msg:`${conn.userName}进入了聊天室`,
time: new Date().toLocaleTimeString()
})
//首先需要告诉所有的用户有新的用户加入到聊天室
//接收到I浏览器的数据
conn.on('text', data => {
//当接收到某个用户的信息的时候,告诉所有用户,发送的信息内容是什么
broadcast({
type:TYPE_MSG,
msg:data,
time: new Date().toLocaleTimeString()
})
})
// 关闭连接的时候, 触发
conn.on('close', data => {
console.log('关闭连接')
count--
// 告诉所有人有人离开了聊天室
broadcast({
type:TYPE_LEAVE,
msg:`${conn.userName}离开了聊天室`,
time: new Date().toLocaleTimeString()
})
})
//连接异常
conn.on('error', data => {
console.log('连接发生异常')
})
})
//
function broadcast(msg){
//server.connections 所有的用户
server.connections.forEach(item =>{
item.send(JSON.stringify(msg))
})
}
server.listen(PORT, ()=>{
console.log(PORT+ 'running。。。。')
})
需要启动node才能运行