WebSocket知识

卷心菜111

已于 2023-10-12 12:00:18 修改

阅读量65

点赞数 1

文章标签： websocket 网络协议网络

于 2023-10-11 21:42:45 首次发布

本文链接：https://blog.csdn.net/m0_71026050/article/details/133746922

版权

学习目标：

掌握websocket知识
了解socket-io框架

学习内容：

掌握websocket的基本概念
掌握websocket的操作步骤
学习socket.io框架

学习时间：

周三14:30-18:00
周四8:30-12:00

学习产出：

一、WebSocket 是一种网络通信协议，很多高级功能都需要它。

在这里插入图片描述

特点：

服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
建立在 TCP 协议之上，服务器端的实现比较容易
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

二、实操

1、准备工作
在这里插入图片描述
2、index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 输入内容 -->
    <input type="text" placeholder="请输入内容">
    <!-- 发送请求 -->
    <button>发送</button>
    <!-- 接收websocket服务得数据 -->
    <div></div>

    <script>
        var input = document.querySelector("input")
        var button = document.querySelector("button")
        var div = document.querySelector("div")
        // 创建websocket
        var socket = new WebSocket('ws://localhost:3000')
        // open websocket服务器连接成功的时候触发
        socket.addEventListener('open', function () {
            div.innerHTML = "连接服务成功"
        })
        // 主动给websocket发消息
        button.addEventListener('click',function(){
            var value =input.value
            socket.send(value)
        })
        // 接收websocket服务的数据
        socket.addEventListener('message',function(e){
            console.log(e.data);
            div.innerHTML=e.data
        })
        // 服务器断开连接时
        socket.addEventListener('close',function(){
            div.innerHTML='服务器断开连接'
        })
    </script>
</body>
<style>
    div {
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        margin-top: 20px;
    }
</style>

</html>

3、app.js

// 导入nodejs-websocket
const ws=require('nodejs-websocket')
const PORT=3000

//创建一个server
//每次只要有用户连接，函数就会被执行，会给当前连接的用户创建一个connect对象
const server=ws.createServer(connect=>{
    console.log('有用户连接上来');
    //每当接收到用户传递过来的数据，这个text事件会被触发
    connect.on('text',data=>{
        console.log('接收到了用户的数据',data);
        //给用户一个响应的数据
        // connect.send(data)
        //对用户发来的数据进行处理，小写转换为大写，并加上字符串
        connect.send(data.toUpperCase()+"!!")
    })
    //只要websocket连接断开，close事件就会触发
    connect.on('close',()=>{
        console.log('服务器断开');
    })
    //注册一个error,处理用户的错误信息
    connect.on('error',()=>{
        console.log('服务器连接异常');
    })
})

server.listen(PORT,()=>{
    console.log('websocket服务器启动成功,监听了端口'+PORT);
})

4、运行步骤

app.js保存后，在终端运行：

在这里插入图片描述

再刷新html启动页面进行连接

三、学习socket.io框架

在这里插入图片描述
socket.io-demo实操
1、首先在终端输入命令 npm install socket.io

2、app.js

const http = require('http')
var fs = require('fs')
const app = http.createServer()



app.listen(3000, () => {
    console.log("服务器启动");
})


app.on('request', (req, res) => {
    fs.readFile(__dirname + '/index.html', function (err, data) {
        if (err) {
            res.writeHead(500)
            return res.end('Error loading index.html')
        }

        res.writeHead(200)
        res.end(data)
    })
})



const io = require('socket.io')(app)

//监听了用户连接的事件
// socket.emit 表示触发某个事件，如果需要给浏览器触发数据，需要触发浏览器注册的某个事件
// socket.on 表示注册某个事件，如果需要获取浏览器的数据，需要注册一个事件，等待浏览器注册
io.on('connection', socket => {
    console.log('新用户连接了');
    //表示给浏览器发送数据，参数1：事件的名字
    // socket.emit('send',{name:'zs'})


    //表示注册事件，参数1：事件名：任意；参数2：获取到的数据
    socket.on('hehe', data => {
        console.log(data);
        socket.emit('send', data)
    })
})

3、index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>哈哈</div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        //连接socket服务
        //参数，服务器地址
        var socket = io("http://localhost:3000")


        socket.emit('hehe', { name: 'zs', age: 18 })
        //接收服务器返回的数据
        socket.on('send', data => {
            console.log(data);
        })

    </script>
</body>

</html>

socket.io-express实操
1、首先在终端 npm install socket.io express
在这里插入图片描述

2、app.js

const { log } = require('console')

var app=require('express')()
var server =require('http').Server(app)
var io=require('socket.io')(server)

//启动了服务器
server.listen(3000,()=>{
    console.log('服务器启动成功');
})

app.get('/',function(req,res){
    res.sendFile(__dirname+'/index.html')
})


io.on('connection', socket => {
    console.log('新用户连接了');
    //表示给浏览器发送数据，参数1：事件的名字
    // socket.emit('send',{name:'zs'})


    //表示注册事件，参数1：事件名：任意；参数2：获取到的数据
    socket.on('hehe', data => {
        console.log(data);
        socket.emit('send', data)
    })
})

3、index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>哈哈</div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        //连接socket服务
        //参数，服务器地址
        var socket = io("http://localhost:3000")


        socket.emit('hehe', { name: 'zs', age: 18 })
        //接收服务器返回的数据
        socket.on('send', data => {
            console.log(data);
        })

    </script>
</body>

</html>

卷心菜111

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebSocket知识

/ open websocket服务器连接成功的时候触发。// 接收websocket服务的数据。// 主动给websocket发消息。// 创建websocket。1、首先在终端输入命令。// 服务器断开连接时。
复制链接

扫一扫