国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

Vue與Node.js通過socket.io通信的示例代碼

2019-11-19 13:25:01
字體:
來源:轉載
供稿:網友

一、Node中socket.io基礎

1、是什么

Socket.IO類庫,是在服務器和瀏覽器之間提供一個共享接口,其可以用于實現以下幾種通信方式:

  1. HTML5中的WebSocket通信
  2. Flash中使用的WebSocket通信
  3. XHR輪詢
  4. JSONP輪詢
  5. Forever Iframe

在通信時,客戶端與服務器端可以使用相同的API

2、怎么用

原理:創建Scoket.IO服務器,該服務器依賴于一個已經創建的HTTP服務器

服務器端引入

var http=require('http')var sio=require('socket.io')var server=http.createServer((req,res)=>{ res.writeHead(200,{'Content-type':'text/html'}) res.end(fs.readFileSync('./snak.html'))}).listen(8088)//創thhp建服務器var socket=sio.listen(server)//監聽http服務器socket.on('connection',(socket)=>{//建立連接后的回調函數})//這里的socket參數,是服務器端用于與客戶端建立連接的scoket端口對象

客戶端引入

 <script src='/socket.io/socket.io.js'></script>//jsvar socket=io.connect()

發送接收消息

send 發送

socket.send('收到信息')

監聽message接收消息

socket.on('message',(val)={ console.log(val) })

emit發送

socket.emit('news',data,(val1,val2...)=>{})

監聽同樣是事件接收

socket.on('news',(val)={ console.log(val) })

使用send發消息,要用‘message'接收,另一端會觸發該事件.

使用emit發送,另一端觸發同樣的事件來接收。

廣播消息

用于多個客戶端與服務器端連接。服務器端使用sockets屬性,向所用客戶端發消息。或者使用用于與客戶端建立連接的socket對象,該對象具有broadcast對象,代表所有與其他Socket.IO客戶端建立連接的socket對象。

//服務器端var io = require('socket.io').listen(server);io.sockets.on('connection', (socket) => {io.sockets.emit('login',name);//socket.broadcast.emit('login',name)})//客戶端var socket=io.connect()socket.emit('login',name)

二、Vue中使用socket.io

在項目目錄下

npm install vue-socket.ionpm install socket.io-client

在main.js中引入

import VueSocketio from 'vue-socket.io';import socketio from 'socket.io-client';Vue.use(VueSocketio,socketio('http://localhost:8888/'));//與服務端鏈接

Vue組件中

export default { name: "NetList", sockets: { //不能改,j建立連接自動調用connect connect: function() {  //與socket.io連接后回調  console.log("socket connected"); },//服務端向客戶端發送login事件 login: function(value) {  //監聽login(后端向前端emit login的回調)console.log(value) } },updated(){//數據更新時,向服務器端發送事件this.$socket.emit("compile"); //觸發start}

服務器端

var http = require('http');var fs = require('fs');var exec = require('child_process').exec;var server = http.createServer(function (req, res) { // console.log(req) // console.log(res) // fs.readFile('./index.html',function(error,data){//若根目錄有index.html,訪問地址,將顯示index.html //  res.writeHead(200,{'Content-Type':'text/html'}); //  res.end(data,'utf-8'); // });}).listen(8888);//創建http服務console.log('Server running ');var io = require('socket.io').listen(server);io.sockets.on('connection', (socket) => { console.log('鏈接成功'); socket.on('compile', () => { socket.emit('login', 'ok'); }); });

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 陵川县| 惠安县| 洪泽县| 通山县| 梓潼县| 自治县| 丰原市| 峨眉山市| 信丰县| 兴海县| 杨浦区| 康定县| 周至县| 承德市| 丰原市| 安化县| 吉水县| 东阿县| 乌兰浩特市| 德江县| 馆陶县| 蕉岭县| 商城县| 和静县| 泸州市| 北京市| 辉南县| 青岛市| 资阳市| 阿坝| 灵寿县| 五河县| 安吉县| 林西县| 库车县| 文登市| 天柱县| 大邑县| 益阳市| 紫金县| 利川市|