websocket 学习

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端口已经被启动了')
})