webSocket使用-socket.io包使用

Ethereal霄

已于 2023-01-11 15:13:46 修改

阅读量524

点赞数

分类专栏：头条项目经验文章标签： websocket 前端 javascript

于 2023-01-11 15:12:12 首次发布

本文链接：https://blog.csdn.net/m0_65812066/article/details/128642428

版权

头条项目经验专栏收录该内容

13 篇文章 0 订阅

订阅专栏

目标

自己用原生JS实现一次WebSocket使用
前提: 一定需要一个后端服务器(支持socket的)

概念

它是一种新的技术, 前后端只要支持这种协议, ==后端可以主动向前端推送内容==

项目中使用: 做一个智能客服

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

其实VueCli脚手架服务器和浏览器之间就建立了一个WebSocket通道

才实现的代码一改, 服务器向浏览器主动推送更新的js文件, 页面就自动更新了

协议对比

小结

vuecli脚手架启动的webpack开发服务器, 和浏览器之间也建立着一条socket通道
WebSocket还是基于TCP, 但是会隔几秒发一个很小的包给后台(心跳包) 维持这段连接

socket.io包使用：

前端对WebSocket封装很好

后端对socket代码也封装好了

目标

后端socket支持
- nodejs的Express建立web服务器
- nodejs集成socket.io包开启后端socket服务
前端也要使用socket.io包使用socket服务
英文文档: https://socket.io/docs/v4/client-initialization/
中文文档: https://www.w3cschool.cn/socket/socket-k49j2eia.html

后端代码

在server的使用文件下安装相关包配置：

npm i socket.io
npm i express

在根目录下创建server.js文件：

const express = require('express')
const app = express()
// const cors = require('cors')
// app.use(cors())
// eslint-disable-next-line node/no-path-concat
app.use(express.static(`${__dirname}/public`))// 设置服务器静态资源目录（目录下的资源可以让服务器直接访问）

const http = require('http').Server(app)// 使用http模块，实例化为http对象
http.listen(4005)// 设置服务器端口
const io = require('socket.io')(http)// socket.io要的http对象不是express对象，而是服务器上socket服务对象

// 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) // 把当前收到的聊天消息, 发送给所有连接着(前端)
  })
})

前端代码：

在public文件夹下创建index.js文件

<!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 src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // 2. 用io()函数链接socket服务器
        // 如果代码部署到了线上服务器, 这个localhost要换成线上的ip地址
        // 因为这个网页请求到本地浏览器上查看, 你要还是localhost那不是请求本地呢吗?
        const socket = io("ws://localhost:4005")
        $("#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>`))
        })

        axios({
        // url: '/api/nc/article/headline/T1348647853363/0-40.html'// 开发环境用
       url: 'http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html'// 上线环境
        }).then(res => {
        console.log(res)
       })
    </script>
</body>

</html>