HTML5-7【webSocket、与HTTP请求的不同、聊天应用】

最新推荐文章于 2022-03-31 19:10:15 发布

可乐雪碧薄荷糖

最新推荐文章于 2022-03-31 19:10:15 发布

阅读量264

点赞数 3

分类专栏： HTML5 文章标签： websocket socket js

本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/113631928

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一.webSocket

(1).基本概念

一旦进入系统就会与服务器简历websocket链接，发送请求后所有客户端响应

用于聊天和多人游戏

ws/wss是协议

绿色代表发送信息，红色代表接受信息，没有做ajax请求

二.与HTTP请求的不同

http是单向得，webSocket是双向得

连接是一直保持得，除非自行关闭

三.聊天应用

(1).基础安装

npm init

npm install express -s

npm install nodemon --save-dev

npm install socket.io -s

(2).创建服务监听端口

建立index.js

let express = require('express');
let app = express(),
    server = app.listen(7000,()=>{
        console.log('正在监听7000端口的请求');
    })

package.json

"scripts":{
    "start": "node node_modules/nodemon/bin/nodemon.js index.js"
}

npm run start启动

接下来就会打印

(3).加入中间件middleware

index.js

app.use(express.static('public'))

建立public/index.html

刷新http://localhost:7000/则会访问到

(4).样式及连接建立

index.css样式设置

h2{
    font-size: 18px;
    padding: 10px 20px;
    color: #62fcd8;
}
#mswChat{
    max-width: 600px;
    margin: 30px auto;
    border: 1px solid #ddd;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
}
#chatWindow{
    height: 400px;
    overflow: auto;
    background-color: #f9f9f9;
}
#outputArea p{
    padding: 14px 0;
    margin: 0 20px;
    border-bottom: 1px solid #e9e9e9;
    color: #555;
}
#feedbackArea{
    color: #aaa;
    padding: 14px 0;
    margin: 0 20px;
}
#outputArea strong{
    color: #62fcd8;
}
label{
    display: block;
    box-sizing: border-box;
    padding: 10px 20px;
}
input{
    padding: 10px 20px;
    width: 100%;
    border: none;
    border-bottom: 1px solid #eee;
    background-color: #eee;
    font-size: 16px;
    box-sizing: border-box;
}
button{
    width: 100%;
    background-color: #62fcd8;
    color: #fff;
    font-size: 18px;
    padding: 12px 0;
    border-radius: 0 0 2px 2px;
    border: none;
}

index.js

let express = require('express'),
    scoket = require('socket.io')
let app = express(),
    server = app.listen(7000,()=>{
        console.log('正在监听7000端口的请求');
    })
app.use(express.static('public'))    

let io = scoket(server)
io.on('connection',(scoket)=>{
    console.log('scoket连接建立');
})

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>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <h1>ok</h1>
    <script type="text/javascript" src="./chat.js"></script>
</body>
</html>

chat.js

let socket = io.connect('http://localhost:7000');

重新加载后就会打印连接已经建立

(5).结构及消息发送

index.html

 <div id="mswChat">
        <div id="chatWindow">
            <div id="outputArea"></div>
        </div>
        <input type="text" id="username" placeholder="username">
        <input type="text" id="message" placeholder="message">
        <button id="sendBtn">发送</button>
    </div>

index.js

io.on('connection',(scoket)=>{
    console.log('scoket连接建立',scoket.id);
    socket.on('chat',(data)=>{
        io.scokets.emit('chat',data)
    })
})

chat.js

let socket = io.connect('http://localhost:7000');
let message = document.getElementById('message'),
    username = document.getElementById('username'),
    sendBtn = document.getElementById('sendBtn'),
    outputArea = document.getElementById('outputArea');
sendBtn.addEventListener('click',()=>{
    socket.emit('chat',{
        message:message.value,
        username:username.value
    })
})    
socket.on('chat',(data)=>{
    outputArea.innerHTML = '<p><strong>'+data.username+': </strong>'+data.message+'</p>'
})

(6).输入中

index.html

  <div id="chatWindow">
            <div id="outputArea"></div>
            <div id="feedbackArea"></div>
        </div>

chat.js

let socket = io.connect('http://localhost:7000');
let message = document.getElementById('message'),
    username = document.getElementById('username'),
    sendBtn = document.getElementById('sendBtn'),
    outputArea = document.getElementById('outputArea'),
    feedbackArea = document.getElementById('feedbackArea');
sendBtn.addEventListener('click',()=>{
    socket.emit('chat',{
        message:message.value,
        username:username.value
    })
})    
socket.on('chat',(data)=>{
    message.value = "";
    feedbackArea = "";
    outputArea.innerHTML += '<p><strong>'+data.username+': </strong>'+data.message+'</p>'
})
message.addEventListener('compositionstart',()=>{
    socket.emit('typing',username.value)
})
socket.on('typing',(data)=>{
    feedbackArea.innerHTML = '<p><em>'+data+'正在输入中....'+'</em></p>'
})

index.js

let express = require('express'),
    socket = require('socket.io')
let app = express(),
    server = app.listen(7000,()=>{
        console.log('正在监听7000端口的请求');
    })
app.use(express.static('public'))    

let io = socket(server)
io.on('connection',(socket)=>{
    console.log('scoket连接建立',socket.id);
    socket.on('chat',(data)=>{
        io.sockets.emit('chat',data)
    })
    socket.on('typing',(data)=>{
        socket.broadcast.emit('typing',data)
    })
})