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

一.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

ok

刷新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

    
    
    
    
    


    
ok
    

chat.js

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

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

(5).结构及消息发送

index.html

 

        

            

        
        
        
        发送
    

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 = '
'+data.username+': '+data.message+'
'
})

(6).输入中

index.html

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 += '
'+data.username+': '+data.message+'
'
})
message.addEventListener('compositionstart',()=>{
    socket.emit('typing',username.value)
})
socket.on('typing',(data)=>{
    feedbackArea.innerHTML = '
'+data+'正在输入中....'+'
'
})

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)
    })
})