1：WebSocket概述、
WebSocket 是 HTML5 開始提供的一種瀏覽器與服務(wù)器間進行全雙工通訊的網(wǎng)絡(luò)技術(shù)。 WebSocket 通信協(xié)議于2011年被IETF定為標(biāo)準RFC 6455，WebSocketAPI 被 W3C 定為標(biāo)準。 在 WebSocket API 中，瀏覽器和服務(wù)器只需要要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。
使用：創(chuàng)建Wevsocket實例化?
const hanclick=(()=>{ //點擊是觸發(fā)方法
const ws = new WebSocket('ws://localhost:8000'); //創(chuàng)建Wevsocket實例化
ws.onerror = function () {
console.log("失敗了"); //建立失敗的函數(shù)
};
const data={
id: new Date().getTime(),
user:username,
dateTime: new Date().getTime(),
msg:state.msg
}
// 當(dāng)連接建立成功，觸發(fā) open 事件
ws.onopen = function(evt) {
console.log("建立連接成功 ...");
// 連接建立成功以后，就可以使用這個連接對象通信了
// send 方法發(fā)送數(shù)據(jù)
ws.send(JSON.stringify(data));
};
// 當(dāng)接收到對方發(fā)送的消息的時候，觸發(fā) message 事件
// 我們可以通過回調(diào)函數(shù)的 evt.data 獲取對方發(fā)送的數(shù)據(jù)內(nèi)容
ws.onmessage = function(evt) {
console.log("接收到消息: " +JSON.stringify(evt.data));
然后開啟一個后端服務(wù) 我用的是no.js
創(chuàng)建index.js??
const WebSocket =require('ws') // 實例化ws
const server= new WebSocket.Server({port:8000}) //端口號8000和前端保持一樣
server.on('connection',ws=>{ // on是ws的后端方法，看自己， connection是用來返回成功鏈接到的函數(shù)
console.log("鏈接到了兄弟");
ws.on('close',()=>{
console.log("走了，不連了"); // close是用來斷開的函數(shù)
啟動服務(wù)器
后端終端? 前端觸發(fā)點擊事件發(fā)送數(shù)據(jù)；
文章來源：http://www.zghlxwxcb.cn/news/detail-701930.html
實例化對象中可以監(jiān)聽到以下事件：文章來源地址http://www.zghlxwxcb.cn/news/detail-701930.html
- open 連接打開的回調(diào)事件，這時 readyState 變?yōu)?OPEN；
- message 收到消息的回調(diào)事件，同時回調(diào)函數(shù)接收到一個 MessageEvent 數(shù)據(jù)；
- close 連接關(guān)閉的回調(diào)事件，這時 readyState 變?yōu)?CLOSED；
- error 建立與連接過程發(fā)生錯誤的回調(diào)事件；
- 主要是這些事件
到了這里，關(guān)于WebSocket的使用指南---前端的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
