什么是WebSocket:
HTML5開始提供的一種瀏覽器與服務(wù)器進(jìn)行全雙工通訊的網(wǎng)絡(luò)技術(shù)昭殉，屬于應(yīng)用層協(xié)議。它基于TCP傳輸協(xié)議藐守，并復(fù)用HTTP的握手通道挪丢。
有以下特點：
- WebSocket可以在瀏覽器里使用
- 支持雙向通信
- 使用很簡單
websocket相關(guān)知識：
創(chuàng)建 WebSocket 連接 -> new WebSocket(url)
常量 CONNECTING -> 0、OPEN -> 1卢厂、CLOSING -> 2乾蓬、CLOSED -> 3
-
WebSocket.onopen-> 連接成功，開始通訊 -
WebSocket.onmessage-> 客戶端接收服務(wù)端發(fā)送的消息 -
WebSocket.onclose-> 連接關(guān)閉后的回調(diào)函數(shù) -
WebSocket.onerror-> 連接失敗后的回調(diào)函數(shù) -
WebSocket.readyState-> 當(dāng)前的連接狀態(tài) -
WebSocket.close-> 關(guān)閉當(dāng)前連接 -
WebSocket.send-> 客戶端向服務(wù)端發(fā)送消息
這里服務(wù)端用了ws這個庫慎恒。相比大家熟悉的socket.io任内，ws實現(xiàn)更輕量，更適合學(xué)習(xí)的目的融柬。完整的項目建議使用socket.io死嗦，或者java中netty等實現(xiàn)。此處用來學(xué)習(xí)websocket以及相關(guān)知識粒氧，用這個比較方便歧杏。
搭建一個聊天室
前端
- 定義一個socket類：具體注冊型宝，發(fā)送消息傅寡，消息數(shù)據(jù)格式可以自定義
class Ws{
ws:WebSocket;
allmsg:any[]=[];
constructor(){
this.ws = new WebSocket('ws://localhost:8088');
this.init();
}
//初始化
init(){
this.ws.onopen = function () {
// console.log('ws onopen');
this.send(JSON.stringify({
msg:'from client: hello'
}));
};
let that = this
this.ws.onmessage = function (e) {
let data = JSON.parse(e.data)
switch (data.type) {
case 'all':
that.allmsg.push({
name : data.from,
msg : data.msg
})
break;
case 'login':
if(data.code===0){
console.error(data.msg)
}
else{
console.log(data.msg);
}
break;
default:
break;
}
};
//廣播消息
sendall(name:string,data:string){
if(this.ws.readyState===WebSocket.OPEN){
this.ws.send(JSON.stringify({
type:'all',
from:name,
msg:data
}));
}
p2p(to:string,data:string){
...
}
login()
}
- 前端頁面：這里簡單實現(xiàn)一下
2.1 先來一個注冊頁面獲取一個用戶名,隨便實現(xiàn)下<div class="login"> <input type="text" placeholder="輸入用戶名" v-model="username"> <button @click="login">zhuce</button> </div>2.2 聊天頁面：
主要就是獲取輸入內(nèi)容哟绊，發(fā)送廣播。然后渲染信息
image.png
服務(wù)端：
import {WebSocketServer} from 'ws'
const wss = new WebSocketServer({port:8088});
let count = 0;
let users = {};
wss.on('connection',(socket,req)=>{
count++
socket.onmessage = function(e){
let data = JSON.parse(e.data)
switch (data.type) {
case "login":
console.log('-------注冊bgein--------');
if(!users[data.name]){
users[data.name] = socket
socket.send(JSON.stringify({
type:'login',
code:1,
msg:`${data.name}注冊成功`
}))
}else{
socket.send(JSON.stringify({
type:'login',
code:0,
msg:'用戶已存在'
}))
}
console.log('-------注冊end--------');
break;
case 'all':
wss.clients.forEach( client =>{
client.send(JSON.stringify({
type:"all",
from:data.from,
msg:data.msg
}))
})
break;
case 'p2p':
break;
default:
break;
}
console.log(e.data);
// console.log(users);
}
console.log(users);
})
wss.on('error',(e)=>{
console.log(e.message);
})
效果
打開三個頁面注冊三個用戶a,b,c
任何一個人發(fā)信息门怪，服務(wù)器端都會根據(jù)類型返回信息。接收到信息后渲染到頁面上
這里簡單介紹websocket的用法锅纺，其中數(shù)據(jù)幀格式掷空，心跳，安全等概論可以參考以下幾篇文章囤锉。
加起來才15分鐘就能看完（手動狗頭）
小白10分鐘入門Websocket坦弟，手把手帶你實現(xiàn)一個多人聊天室～ - 掘金 (juejin.cn)
WebSocket：5分鐘從入門到精通 - 掘金 (juejin.cn)
demo源碼:
點對點傳輸和文件圖片有空也會加上，可能后期不會在使用ws了官地，功能沒有socket.io強大酿傍。學(xué)習(xí)的話比較推薦。希望大佬們能給個贊
Payegen/websocketdemo (github.com)
