[网络协议] websocket

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 网络协议 -> websocket -> 正文阅读

[网络协议]websocket

1.什么是websocket？

webrtc能更好的处理流文件。直播用的就是webrtc。

2.websocket通信原理

3.websocket服务端与客户端通信实现

3.1 npm install websocket-node

服务端
index.js

// 服务器

var WebSocket= require('websocket').server
var http = require('http')


var httpServer = http.createServer().listen(8080, function(){
  console.log('http://127.0.0.1:8080')
})

var wsServer = new WebSocket({
  httpServer: httpServer,
  autoAcceptConnections: false,
})
// 1.方法1。
// 创建连接池，里面存储的是每一个连接实例
var conArr = []

wsServer.on('request', function(request) {
// 创建连接实例
  var connection = request.accept()
  conArr.push(connection)
  connection.on('message', function(msg) {
    console.log('msg', msg)
    // 服务端给客户端发送消息
    // 1.消息只发给一个人
    // connection.send(msg.utf8Data)
    // 2.消息同步给多个人
    for(var i = 0; i < conArr.length; i++) {
      conArr[i].send(msg.utf8Data)
    }
  })
})

启动服务器：node index.js
在浏览器中打开打开

客户端
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="msg"></div>
  <input type="text" id="text"/>
  <input type="button" value="发送" onclick="send()">
  <script>
   
    // 可以直接new，浏览器直接就支持.ws:ws协议.固定写法：ws + 地址。
    // 1.创建客户端的连接
    var websocket = new WebSocket('ws://127.0.0.1:8080')
    // 2.检测连接是否成功. readyState: 当前的状态。0 1 2 3 总共4中状态。
    // 0: new，连接还没建立（正在建立连接）
    // 1:连接已经建立成功
    // 2:连接正在关闭
    // 3:连接已经关闭
    websocket.onopen = function() {
      // 异步
      // console.log(websocket.readyState)
    }
    function send() {
      var text = document.getElementById('text').value
      // 2. 客户端发送消息给服务器
      websocket.send(text)
    }
    // 3.监听服务器推送到客户端的消息事件
    websocket.onmessage = function(back) {
      console.log('back', back, back.data)
    }
  </script>
</body>
</html>

3.2 socketio

https://socket.io/docs/v4/handling-cors/
npm install socket.io@4.1.2
index.js

const { createServer } = require("http");
const { Server } = require("socket.io");

const httpServer = createServer();
const io = new Server(httpServer, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  }
});

io.on("connection", (socket) => {
  // 自定义事件
  socket.on('sendMsg', (data) => {
    console.log(data)
    // 服务端发送消息
    // 广播
    io.emit('pushMsg', text)
  })
});

httpServer.listen(3000, function() {
  console.log('http://127.0.0.1:3000')
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.socket.io/4.2.0/socket.io.min.js"></script>
</head>
<body>
  <div id="msg"></div>
  <input type="text" id="text"/>
  <input type="button" value="发送" onclick="send()">
  
  <script>
    // 客户端建立ws连接
    var socket = io.connect('http://127.0.0.1:3000')
    function send() {
      var text = document.getElementById('text').value
      // 2. 客户端发送消息给服务器
      // sendMsg和服务端自定义事件名称一定要对应
      socket.emit('sendMsg', text)
    }
    // pushMsg和服务端自定义事件名称一定要对应
    socket.on('pushMsg', (data) => {
      console.log('data', data)
    })

  </script>
</body>
</html>