websocket

最新推荐文章于 2023-09-12 13:29:58 发布

yanling.zhang

最新推荐文章于 2023-09-12 13:29:58 发布

阅读量137

点赞数

分类专栏：工作积累-jsvascript 文章标签： websocket node.js javascript

本文链接：https://blog.csdn.net/weixin_38245947/article/details/120537298

版权

工作积累-jsvascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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>

跨域遇到的2种问题：
1.浏览器阻止发送请求
2.浏览器正常发送请求，服务端也接受请求并作出响应，但是浏览器拒绝服务器的数据响应

2种表现形式：
1.简单请求
2.需预检请求（复杂请求）

yanling.zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
websocket

1.什么是websocket？webrtc能更好的处理流文件。直播用的就是webrtc。2.websocket通信原理3.websocket服务端与客户端通信实现3.1 npm install websocket-node服务端index.js// 服务器var WebSocket= require('websocket').servervar http = require('http')var httpServer = http.createServer().listen(808
复制链接

扫一扫