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/[email protected]/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>

第三方使用

使用第三方公司封装的插件(SDK)

推荐2个比较常用的即时通信服务平台

环信
容联云

具体使用过程, 根据文档, 集成到自己项目中

小结

可以不用原生WebSocket干, 使用一些包例如, socket.io包
前端要注意使用client名字的js文件
也可以使用第三方服务, 快速集成功能

webSocket使用-socket.io包使用

目标

概念

小结

socket.io包使用：

目标

后端代码

前端代码：

第三方使用

小结

猜你喜欢