在vue2.x里面簡單使用socketio問題
更新時間：2022年10月09日 09:43:36 作者：The_more_more
這篇文章主要介紹了在vue2.x里面簡單使用socketio問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
前言
首先來了解一下什么是socketio：
- 使用流行的Web應用程序堆棧（如LAMP（PHP））編寫聊天應用程序通常非常困難。它涉及輪詢服務器以查找更改，跟蹤時間戳，并且它比應有的速度慢得多。
- 傳統(tǒng)上，套接字是構建大多數實時聊天系統(tǒng)的解決方案，在客戶端和服務器之間提供雙向通信通道。
- 這意味著服務器可以將消息推送到客戶端。每當您編寫聊天消息時，其想法是服務器將獲取它并將其推送到所有其他連接的客戶端。
簡單的來說就是一般的邏輯就是服務器響應客戶端，而socketio基于webstorm實現(xiàn)了服務端推送到其他的客戶端，不再處于被動的局面。
服務端
新建好文件夾，打開終端輸入：
npm init -y
初始好包之后下載好express，在官網有傳統(tǒng)的http，這里以express來演示：
npm i express@4.18.1
下載好socketio
npm i socket.io@4.5.1
編寫好相應的代碼：
const app = require('express')()
const server = require('http').Server(app)
const io = require('socket.io')(server, { cors: true })
app.all('*', function (req, res, next) {
? res.header('Access-Control-Allow-Origin', '*')
? res.header('Access-Control-Allow-Headers', 'Origin,X-Requested-With,Accept,Content-type')
? res.header('Access-Control-Allow-Credentials', true)
? res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
? res.header('Content-Type', 'application/json;charset=utf-8')
? if (req.method.toLowerCase() == 'options') res.sendStatus(200)
? else next()
})
server.listen(3030, () => {
? console.log('listening on http://localhost:3030')
})這里寫了一些跨域的配置，監(jiān)聽的端口號為3030，接著在下面書寫下列代碼：
io.on('connect', (socket) => {
? console.log('有人連接成功了')
? socket.on('my other event', function (data) {
? ? console.log(data)
? ? socket.emit('news', data)
? })
? socket.emit('open', {data:'恭喜你收到了信息'})
? // 監(jiān)聽客戶端斷開
? socket.on('disconnect', () => {
? ? console.log('客戶端斷開')
? })
})connect監(jiān)聽是否有人連接，如果客戶端有人連接了就會觸發(fā)回調，socket就會收到一些所需的事件觸發(fā)
客戶端
在vue2.x里面我們同樣要下載包：
npm i socket.io-client@3.1.0 vue-socket.io@3.0.10
在入口文件里面引入：
// socket.io
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(
? new VueSocketIO({
? ? debug: false,
? ? connection: SocketIO('http://127.0.0.1:3030', {
? ? ? autoConnect: false // 取消自動連接 ? ??
? ? }),
? ? extraHeaders: { 'Access-Control-Allow-Origin': '*' }
? })
)這里的配置項有很多，可以去官網更好的了解，這里傳入的網址也就是我們監(jiān)聽的端口
在一個干凈的頁面書寫demo：
<template>
? <div class="wrap">
? ? <button @click="connected">連接Socket</button>
? ? <button @click="socketSendmsg">發(fā)送數據</button>
? </div>
</template>
<script>
export default {
? methods: {
? ? connected() {
? ? ? this.$socket.open() // 開始連接socket
? ? },
? ? socketSendmsg() {
? ? ? this.$socket.emit('my other event', { my: 'data' })
? ? }
? },
? sockets: {
? ? connecting() {
? ? ? console.log('正在連接')
? ? },
? ? disconnect() {
? ? ? console.log('Socket 斷開')
? ? },
? ? connect_failed() {
? ? ? console.log('連接失敗')
? ? },
? ? connect() {
? ? ? console.log('socket connected')
? ? },
? ? news(data) {
? ? ? console.log(data)
? ? },
? ? open(data) {
? ? ? console.log(data)
? ? }
? }
}
</script>使用介紹及流程
使用：node app.js啟動服務端，npm run serve啟動客戶端
頁面會出現(xiàn)兩個按鈕，按下第一個就會開始連接，這時候服務器就會打印有人連接了，點擊發(fā)送消息就會觸發(fā)this.$socket.emit('my other event', { my: 'data' })第一個參數就是需要響應服務端的名稱，第二個就是我們傳遞的數據，這時候服務端收到數據就會打印在終端：
socket.on('my other event', function (data) {
? ? console.log(data)
? ? socket.emit('news', data)
? })這時候服務端觸發(fā) socket.emit('news', data)第一個參數就是給到客戶端的名稱，第二個就是上一個函數收到的結果，這里是原封不動返回出去，到了客戶端里面再sockets這個對象里面就可以寫上'new'的函數來接收，參數就是服務器給我們的數據，這里直接打印在控制臺。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue安裝瀏覽器開發(fā)工具步驟詳解，本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
moment.js是一款現(xiàn)在對時間處理的強大的函數，這篇文章主要介紹了Vue?日期獲取的示例代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01
el-table 表格最大高度max-height的問題解決
在工作中遇到了多個滾動條的情況,是因為el-table的max-height設置為固定值導致的,本文主要介紹了el-table 表格最大高度max-height的問題解決,具有一定的參考價值,感興趣的可以了解一下2024-07-07
Vue3中Composition?API和Options?API的區(qū)別
Vue3的Composition API和Options API是Vue.js框架中的兩種不同的API，本文主要介紹了Vue3中Composition?API和Options?API的區(qū)別，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
這篇文章主要介紹了Vue使用Ref跨層級獲取組件的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
今天小編就為大家分享一篇vue實例中data使用return包裹的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue-router的HTML5 History模式設置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在本篇文章里小編給大家整理的是關于VUE 項目初建和常見問題以及相關知識點內容，有需要的朋友們學習下。2019-09-09
vue生命周期beforeDestroy和destroyed調用方式
這篇文章主要介紹了vue生命周期beforeDestroy和destroyed調用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue單頁應用加百度統(tǒng)計代碼的解決方法，需要的朋友參考下吧2018-01-01