前言
工作中用到了消息推送功能，之前了解過SOCKET 無意中了解到即時通訊框架SocketIO 簡單說兩句
Socket.IO 是什么
Socket.IO是一個庫，基于 Node.js 的實時應用程序框架。可以在瀏覽器和服務器之間實現(xiàn)實時，雙向和基于事件的通信。它適用于每個平臺、瀏覽器或設備，同樣注重可靠性和速度。
Socket.IO 起源
WebSocket 的產生源于 Web 開發(fā)中日益增長的實時通信需求，對比基于 http 的輪詢方式，它大大節(jié)省了網絡帶寬，同時也降低了服務器的性能消耗。
WebSocket 協(xié)議在2008年誕生，2011年成為國際標準。雖然主流瀏覽器都已經支持，但仍然可能有不兼容的情況，為了兼容所有瀏覽器，就誕生SocketIO。
SocketIO將WebSocket、AJAX和其它的通信方式全部封裝成了統(tǒng)一的通信接口，也就是說，我們在使用SocketIO時，不用擔心兼容問題，底層會自動選用最佳的通信方式。
Socket.io有什么特點
易用性：Socket.io封裝了服務端和客戶端，使用起來非常簡單方便。
跨平臺：Socket.io是跨平臺的，可以實現(xiàn)多平臺的即時通訊，Socket.io支持跨平臺，這就意味著你有了更多的選擇，可以在自己喜歡的平臺下開發(fā)實時應用。由于 iOS 端進行 socket 編程主要使用 GCDAsyncSocket 框架，但要實現(xiàn) Android、iOS、web 多平臺的通訊，還是選擇統(tǒng)一的框架或協(xié)議比較好。
自適應：Socket.io 實現(xiàn)了實時雙向的基于事件的通訊機制，是基于 webSocket 的封裝，但它不僅僅包括 webSocket，還對輪詢（Polling）機制以及其它的實時通信方式封裝成了通用的接口，并且在服務端實現(xiàn)了這些實時機制的相應代碼，它會自動根據瀏覽器從WebSocket、AJAX長輪詢、Iframe流等等各種方式中選擇最佳的方式來實現(xiàn)網絡實時應用，非常方便和人性化，而且支持的瀏覽器最低達IE5.5。
好了廢話不多說開始干活。
正文
第一步 創(chuàng)建nodeJS的http服務器，作為socket服務端
新建文件夾，命名為NodejsScoketDemo，然后使用終端，npm init ，一路回車即可
加入express依賴和socket.io依賴
npm install express socket.io
這是我使用的依賴版本
工程目錄如圖：
socket.js代碼
const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIO(server,{
cors: {
origin: '*'
}
});
io.on('connection',(socket) => {
console.log('user connected');
socket.on('hello',(data) => {
console.log(`收到客戶端的消息：${data}`);
})
});
app.get('/',(request, response) => {
/*在瀏覽器發(fā)送 http://127.0.0.1:24000 的請求，客戶端定義了監(jiān)聽'message'的socket，所以可以接收消息，即使客戶端有代碼
io.on('message',(data) => {
console.log(data);
});
*/
io.emit('message','服務端向客戶端推送消息...');
response.writeHead(200, {"Content-type": "text/plain"});
response.end();
});
server.listen(24000,() => {
console.log("server is up and running on port 24000");
});
谷歌度娘，十有八九都是說配置前端的config目錄下的index.js文件的代理，結果都是無效的，仍然報跨域被阻止的錯誤，其實關鍵不是說這個代理不用設置，要設置。關鍵在
（下邊這塊代碼僅用來說明展示，上面已經有了，不用再重復寫了）
const io = socketIO(server,{
cors: {
origin: '*'
}
});
那么這時候，我們就可以直接使用命令啟動socket.js ,開啟http服務器，并且監(jiān)聽24000端口
node src/socket/socket.js
第二步 創(chuàng)建vue-cli腳手架，作為socket客戶端
npm init webpack vuesocketdemo
引入依賴
npm install vue-socket.io socket.io-client
這些是我引入的依賴版本，理論上，只引入socket.io-client 依賴就夠了
我們在main.js導入依賴，并且使用它，SocketIO里面填寫ws://IP:監(jiān)聽的服務器端口
import Vue from 'vue'
import App from './App'
import router from './router'
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.config.productionTip = false
Vue.use(new VueSocketIO({
debug: true,
connection: SocketIO('ws://127.0.0.1:24000')
}));
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
接下來，我們在conifg的index.js文件中配置代理，注意，第二個代理路勁的ws屬性必須設置為false，否則還會報跨域被阻止的錯誤
proxyTable: {
'/socket.io':{
target: 'http://127.0.0.1:24000/', // target host
changeOrigin: true, // needed for virtual hosted sites
logLevel: 'debug'
},
'/sockjs-node': {
target: 'http://127.0.0.1:24000',
ws: false,
changeOrigin: true
}
},
最后，我們在HelloWorld.vue 編寫socket代碼
在html部分，編寫一個按鈕和輸入框，用來發(fā)送消息給服務器
<template>
<div class="hello">
<input id="inputArea" type="text">
<button @click="sendMsgToServer">hello發(fā)送消息給服務端</button>
<button @click="getMsgToServer">獲取服務器信息</button>
</div>
</template>
在javascript部分，連接到服務器，并且編寫一個發(fā)送輸入的消息給服務器的程序
<script>
import io from 'socket.io-client';
const socket = io('http://127.0.0.1:24000');
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
/*socket.emit('hello','xxx') 表示，服務端上定義了一個監(jiān)聽'hello'的socket，
即服務端有代碼
socket.on('hello',(data) => {
//這是接收到的客戶端消息
console.log(data);
})
*/
sendMsgToServer(){
socket.emit('hello',document.getElementById("inputArea").value);
}
},
created() {
//一定要移除舊的message監(jiān)聽，否則會出現(xiàn)重復監(jiān)聽的狀況
socket.removeListener('message');
//這是移除所有監(jiān)聽
// socket.removeAllListeners();
console.log('這是移除所有監(jiān)聽');
socket.on('message',(data) =>{
console.log(data)
});
}
}
</script>
樣式部分我就沒定義了
第三步 測試
服務端啟動http服務器以監(jiān)聽socket 24000端口
node src/socket/socket.js
啟動客戶端vue
npm run dev
測試瀏覽器發(fā)送請求給http服務器，委托http服務器把消息推送給客戶端
測試瀏覽器發(fā)送請求給http服務器，委托http服務器把消息推送給客戶端
測試客戶端發(fā)送消息給服務端
結束
到此Nodejs的服務器端和vue的客戶端已經正常跑起來啦，撒花撒花…
接下來還有其它SockectIO的使用陸續(xù)更新，未完續(xù)待…
我的Demo源碼給出僅供大家參考，如有問題歡迎大家交流溝通，一起學習進步文章來源：http://www.zghlxwxcb.cn/news/detail-419759.html
鏈接: https://pan.baidu.com/s/1lmxPa4FJ8enHKGAvWleJFQ 提取碼: CSDN 復制這段內容后打開百度網盤手機App，操作更方便哦文章來源地址http://www.zghlxwxcb.cn/news/detail-419759.html
到了這里，關于猿創(chuàng)征文｜vue中SocketIO的正確使用方法，并且解決跨域問題的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
