即时通讯 webScoket

项目 同时被 2 个专栏收录
42 篇文章 0 订阅
42 篇文章 0 订阅

即时通讯

  • 即时发送和接收互联网消息等的业务

  • ajax只能是发送请求后,得到一次响应,无法实现即时通讯、

    • ajax轮询可以模拟,比如创建计时器,每间隔一秒,自动调用接口

    • (1): 万一服务器上没有你要的最新消息, 这次请求和相应是无意义的

      (2): 服务器为了给你做出相应, 还占用了一定内存和带宽, 很浪费

  • 即时通讯一次请求多次响应

  • Webscoket

    • HTML5出的新的协议,可以在一个TCP链接上,实现即时通讯的效果

在这里插入图片描述

- 需要前端的后端的支持
- 后端可以主动向前端推送内容
  • webScoket的使用项目中使用: 做一个智能客服

  • Websocket 通过HTTP/1.1 协议的101状态码进行握手

  • 实现代码

    • 前端代码

    • <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>体验websocket</title>
          <style>
            #contanier {
              width: 500px;
              height: 400px;
              border: 2px dashed #7575e7;
              overflow-y: auto;
            }
          </style>
        </head>
        <body>
          <div id="contanier"></div>
          <!-- 1  建立连接 (拨号) -->
          <!-- 2  发消息 接消息 -->
          <!-- 3  关闭连接 -->
          <input type="text" id="message">
          <button onclick="openWS()">建立连接</button>
          <button onclick="sendMessage()">发送消息</button>
          <button onclick="closeWS()">关闭连接</button>
      
          <script>
            let dom = document.getElementById("contanier")
            let inputDom = document.getElementById("message")
            let isOpen = false  // 表示是否已经建立了拨号
            let ws;  // 别的方法 也需要使用ws
            // 打开websocket连接
            let openWS = function (){
              /// 网络上提供的一个测试websocket功能的服务器地址。
              /// 它的效果是,你向服务器发什么消息 ,它就原样回复给你。
              ws = new WebSocket('wss://echo.websocket.org')  // 建立与服务器的连接
              
              // onopen是webSocket约定事件名
              // 当本地客户端浏览器与服务器建立连接之后,就会执行onopen的回调
              ws.onopen = function (event) {
                isOpen = true
                // 建立成功
                dom.innerHTML = dom.innerHTML + `<p>与服务器成功建立连接</p>`
              }
              //   接收消息
              // onmessage是webSocket约定事件名
              // 如果从服务器上发过来了消息,则会进入onmessage的回调
              ws.onmessage = function (event) {
                // 由于 我们先给服务器发了消息 服务器给我们回了消息
                dom.innerHTML = dom.innerHTML + `<p style='color: blue'>服务器说:${event.data}</p>`
              }
              // onclose是webSocket约定事件名
              ws.onclose = function () {
                // 此函数表示 关闭连接成功
                isOpen = false // 把状态关闭掉
                dom.innerHTML = dom.innerHTML + `<p>与服务器连接关闭</p>`
              }
            }
            //   发送消息 接收消息
            let sendMessage = function () {
              if(inputDom.value && isOpen)   {
                // 发消息 要等到 连接成功才能发 而且内容不为空
      
                // 发消息就是send
                ws.send(inputDom.value) // 发送消息
                //   发完之后 添加到 当前视图上
                dom.innerHTML = dom.innerHTML + `<p style='color: red'>我说:${inputDom.value}</p>`
                inputDom.value = ''
              }
      
            }
            // 关闭连接
            let closeWS = function () {
              ws.close() // 关闭连接
            }
          </script>
        </body>
      </html>
      
  • socket.io包使用

    • 后端代码. (server.js)

    • const express = require("express")
      const app = express()
      app.use(express.static(__dirname + '/public'))
      const http = require('http').Server(app);
      http.listen(4000)
      const io = require('socket.io')(http);
      
      // io.on('connection') -- 固定的, 用于 监测有没有人用socket服务链接我, 触发后面的函数
      io.on('connection', function(socket){ // socket连接者对象
        // console.log('a user connected');
        socket.on('cTos', data => { // 谁来链接我, 我就给谁绑定一个事件叫cTos(随便), data接收的就是前端触发这个事件传递过来的聊天消息
      
          // io.sockets(拿到当前连接池里所有的socket对象-链接到我的所有人), emit()触发事件(前端事件叫sToC) ---- 广播
            io.sockets.emit('sToC', data) // 把当前收到的聊天消息, 发送给所有连接着(前端)
        })
      });
      
    • 前端代码(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>首页</title>
        </head>
      
        <body>
          <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
          <!-- 1. 引入前端的socket.io注意版本 一定要跟后台对上 -->
          <script src="https://cdn.jsdelivr.net/npm/socket.io@4.1.2/client-dist/socket.io.min.js"></script>
          <div>
            <p>聊天窗口:</p>
            <hr>
            <div id="result"></div>
          </div>
          <div>
            <input type="text" placeholder="用户名" id="user">
            <input type="text" placeholder="消息" id="msg">
            <button id="btn">发送</button>
          </div>
          <script>
            // 2. 用io()函数链接socket服务器
            // 如果代码部署到了线上服务器, 这个localhost要换成线上的ip地址
            // 因为这个网页请求到本地浏览器上查看, 你要还是localhost那不是请求本地呢吗?
            const socket = io("ws://localhost:4000")
            $("#btn").on("click", function () {
              let user = $("#user").val()
              let msg = $("#msg").val()
              console.log(user, msg);
      
              // 3. socket触发后端的事件
              socket.emit('cTos', { user, msg })
            })
      
            socket.on('sToC', obj => {
              $("#result").append($(`<p>${obj.user} 说: ${obj.msg}</p>`))
            })
          </script>
        </body>
      
      </html>
      
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

run-Ameng

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值