websocket 的基本概念
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
websocket的属性
Socket.readyState 表示连接状态
0 表示连接尚未建立
1 表示连接已建立,可以进行通信
2 表示连接正在进行关闭
3 表示连接已关闭或者连接不能打开
websocket的事件
open 连接建立时触发
message 客户端收到服务端数据时触发
error 通信发生错误时触发
close 连接关闭时触发
websocket基本使用过程
// 1、创建websocket服务
// 参数1:websocket的服务地址
var ws = new WebSocket("ws://echo.websocket.org");
// 2、open当服务连接成功是触发
ws.addEventListener('open', function( ){
div.innerHTML = '连接成功!'
})
// 3、 主动给websocket发消息
button.addEventListener('click', function(){
// 要发送给服务器的数据,这里是把页面中input中输入的内容发给服务端
var value = input.value
ws.send(value)
})
// 4、 接收websocket服务的数据
ws.addEventListener('message', function(e) {
console.log(e.data)
})
// 5、 服务异常
ws.addEventListener('error', ()=> {
console.log('服务崩溃了~')
})
多页面使用要用到broadcast广播
A页面把数据发给服务端,服务端接收数据,服务端把数据发出去,B页面接收
聊天室的话就是一个页面把数据发到服务端,服务端通过broadcast广播把数据发个给个页面
服务端代码
const ws = require('nodejs-websocket')
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2
/*
分析:
消息应该室一个对象
type:表示消息类型 0:用户进入聊天室 1:用户离开聊天室 2:正常的聊天消息
msg: 消息的内容
time: 聊天的具体事件
*/
let count = 0
const server = ws.createServer(coon => {
console.log('新的连接')
count++
coon.userName = `用户${count}`
broadcast({
type: TYPE_ENTER,
msg: `${coon.userName}进入了聊天室`,
time: new Date().toLocaleTimeString() // 22:12
})
coon.on('text', data => {
// 聊天的消息
broadcast({
type: TYPE_MSG,
msg: data,
time: new Date().toLocaleTimeString() // 22:12
})
})
coon.on('close', data => {
console.log('关闭连接')
count--
broadcast({
type: TYPE_LEAVE,
msg: `${coon.userName}离开了聊天室`,
time: new Date().toLocaleTimeString() // 22:12
})
})
coon.on('error', data => {
console.log('服务异常')
})
})
// 广播。给所有用户发消息
// broadcast只能传string
function broadcast(msg) {
// server.connections表示所有的用户
server.connections.forEach(item => {
item.send(JSON.stringify(msg))
})
}
server.listen(3000, () => {
console.log('监听端口3000')
})
版权声明:本文为m0_45237165原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。