webSocket

最新推荐文章于 2024-06-10 22:18:41 发布

riverrun_z

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量61

点赞数

分类专栏： websocket 文章标签： websocket javascript 前端

本文链接：https://blog.csdn.net/weixin_48047636/article/details/125276906

版权

websocket 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装命令

npm init -y
npm i --save socket.io

客户端

<!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>socketclient.html</title>
</head>

<body>
    <button id="btn">点我建立webSocket连接</button>
    <button id="btn2">点我发消息:你瞅啥?</button>
    <button id="btn3">点我发消息:再瞅一个试试?</button>
    <script src="./socket.io.js"></script>
    <script>
        let socket;
        btn.onclick = function () {
            //io需要引入socket.io.js它在node_modules中
            socket = io('http://localhost:3000')
            console.log(socket);
            // 接收消息
            socket.on('textmsg', function (data) {
                alert(data)
            })
        }
        btn2.onclick = function () {
            if (socket == undefined) {
                alert('先点按钮建立客户端和服务器的连接,才能发消息')
                return
            }
            socket.emit('textmsg', '你瞅啥?')
        }
        btn3.onclick = function () {
            if (socket == undefined) {
                alert('先点按钮建立客户端和服务器的连接,才能发消息')
                return
            }
            socket.emit('textmsg', '再瞅一个试试?')
        }


    </script>
</body>

</html>

服务器端index.js

const http = require('http').createServer()
// 引入socket.io,并把socket.io挂载到http服务器中
// 这样http服务器可以接收客户端socketio的请求
// http前是函数 调用并传参http
const socketio = require('socket.io')(http, {
    cors: {
        origin: '*'//解决跨域问题,写完解决跨域要重启服务器
    }
})
// 基于socketio 监听客户端的websocket长连接,
//连接成功后打印
socketio.on('connection', function (socket) {
    console.log('有客户端进来了' + socket.id);
    // 监听接收消息
    socket.on('textmsg', function (data) {
        console.log('接收客户端的消息：' + data);
        // 恢复客户端,给客户端发消息
        if (/你瞅啥/.test(data)) {
            socket.emit('textmsg',
                '瞅你咋滴')
        } else if (/瞅一个试试/.test(data)) {
            socketio.emit('textmsg', '群殴!')
        }
    })
})
// http服务器监听端口接收客户端的请求
http.listen(3000, function () {
    console.log('websocket服务已启动...');
})