1: websocket:
websocket 是什么?
Websocket: 协议是基于TCP 一种新的网络协议, 它实现了浏览器与服务器全双工(full-duplex)通信协议,
允许服务器主动向客户端发送信息。
websocket 是一种持久协议, (就是长连接); http 协议 也是短链接, 无状态协议。
早期没有websocket, 是通过ajax 轮询, 由于http 请求, 服务器无法主动给浏览器发送数据, 因此需要浏览器定时给服务器发送请求 (设置请求的时间间隔), 服务器把最新的的数据响应给浏览器, 这种模式的缺点就是浪费性能和资源。
传统的http 请求 是浏览器发送请求 到 服务器响应请求的过程。 而服务器无法主动向浏览器推送信息。
websocket 是一种持久的协议, 就是长链接。 (客户端既可以向服务器对发送请求, 服务器端也可以向客户端推送消息)
websocket: 应用场景就是聊天, 实时通信场景。 websocket 的性能要比ajax 轮询效率高。 并且ajax 请求的并不是实时的。
websocket: 链接 是长连接。 Websocket: 对象提供了创建和管理Wessocket 链接, 发送和接受数据的API.
构造函数, 返回一个Websocket 对象。 在H5 已经提供了 Websocket API
// 1: 创建websocket 创建websocket 服务, Websocket: 是一个对象。 是浏览器提供的APi 对象。
// 在浏览器中network 网络请求中all; 代表的所有的请求。 XHR: 代表ajax 请求 ws: 代表 websocket 请求。
websocket 请求方法: Socket.send() 方法 ===> 发送数据
Socket.close() 方法 ===> 关闭链接
open: 方法: 当websocket 服务链接成功的时候触发。
socket.addEventListener('open', function() {
div.innerHTML = "服务器连接成功";
})
button.addEventListener('click', function() {
var value = input.value;
socket.send(value);
})
在 websocket 对象中提供的属性onopen() 方法, onerror 方法,
onmessage: 方法 onclose 方法;
// 接受websocket 服务数据
socket.addEventListenser('message', function() {
var div = document.createElement('div');
div.innnerHTML = e.data;
div.appendChild(div); 不是替换铁元素而是追加元素
})
在 node 环境中使用websocket 服务
// 开发服务端 websocket
创建一个 app.js 文件;
1: 安装依赖 npm install nodejs-websocket;
在app.js 文件中 // 创建本地的Wesocket 服务器。
1: 导入nodejs-websocket 包
const ws = require("nodejs-websocket")
// 创建一个端口
const PORT = 3000; // 创建一个3000端口
2: 创建一个server, 每次只要有用户连接, 函数就会被执行, 会给当前的连接用户创建一个connect 对象
const server = ws.createServer(connect => {
console.log('有用户链接上来了');
每当检测到用户传递过来的数据, 这个text 事件会被触发。
connect.on("text", data => {
console.log('接收到了用户数据', data);
// 给用户一个响应的数据
// 用户发送过来的的数据, 把小写转化为大写, 并且拼接一点内容;
connect.send(data.toUpperCase() + '!!!')
})
// 只要websocket 连接断开, close 事件就会触发
connect.on('close', ()=>{
console.log('连接断开了')
});
// 注册一个error, 处理用户的错误信息
connect.on('error', ()=>{
console.log('用户连接异常')
});
});
server.listen(PORT, ()=> {
console.log('websocket 服务已经启动成功了, 监听端口' + PORT)
})
创建一个服务器:
1: 首先在项目中安装 nodejs-websocket 包依赖工具
// 记录当前连接上来的总的用户数量
let count = 0;
2: 然后创建一个服务器
conn: 每一个连接到服务器的用户都会有一个 conn
const server = ws.createServer(conn => {
console.log('连接数据');
count++;
conn.userName = `用户${count}` // 模板字符串
1: 告诉所有用户, 有人加入聊天室
boardcast(`${conn.userName} 进入聊天室`)
// 接受到浏览器的数据
conn.on('text', data=> {
// 当我们接受到某个用户信息的时候, 告诉所用的用户, 发送信息的内容是什么?
boardcast(data); // 告诉所有人广播的信息
});
// 关闭连接时, 触发
conn.on('close', data=> {
console.log('关闭连接');
count--
3: 告诉所有的用户, 有人离开聊天室
boardcast(`${conn.userName} 离开聊天室`);
});
// 发生异常的时候触发
conn.on('error', data=> {
console.log('发生异常')
})
})
// 定义广播的一个函数, 给所有的用户发送信息
function boardcast(msg) {
// server.onnections: 表示所有的用户
server.connections.forEach(item => {
item.send(msg); // 发送给每一个用户信息
})
}
3: 然后监听一个端口
server.listen(3000, ()=> {
console.log('3000端口已经被启动了')
})