Vue与Node.js通过socket.io通信的示例代码

 更新时间:2018年07月25日 11:15:41   作者:fenerchen  
这篇文章主要介绍了Vue与Node.js通过socket.io通信的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一、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>
//js
var 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.io
npm 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');
 }); 
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 纯JS如何实现vue.js下的双向绑定功能

    纯JS如何实现vue.js下的双向绑定功能

    对于vue下的双向绑定功能,个人理解为在处理逻辑的过程中缓存了大量的node对象,node对象可以是html标签、文本内容。既然选择了缓存这些对象,那么在用的过程中哪里需要改变就把node拿出来,进行标签属性的变更或者文本内容的修改。本文主要讲了如何实现双向绑定
    2021-06-06
  • vuedraggable实现简单拖拽功能

    vuedraggable实现简单拖拽功能

    这篇文章主要为大家详细介绍了vuedraggable实现拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue.js利用defineProperty实现数据的双向绑定

    vue.js利用defineProperty实现数据的双向绑定

    本篇文章主要介绍了用Node.js当作后台、jQuery写前台AJAX代码实现用户登录和注册的功能的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • vue 条件渲染v-if和v-show

    vue 条件渲染v-if和v-show

    这篇文章主要介绍了vue 条件渲染v-if和v-show,在模板中,可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的,有时候我们想要在一个条件中加载多个html元素,那么我们可以通过template元素上实现,下面就来看看具体实现吧
    2021-10-10
  • vue2+element-ui使用vue-i18n进行国际化的多语言/国际化详细教程

    vue2+element-ui使用vue-i18n进行国际化的多语言/国际化详细教程

    这篇文章主要给大家介绍了关于vue2+element-ui使用vue-i18n进行国际化的多语言/国际化的相关资料,I18n是Vue.js的国际化插件,项目里面的中英文等多语言切换会使用到这个东西,需要的朋友可以参考下
    2023-12-12
  • vue echarts移动端踩坑解决记录

    vue echarts移动端踩坑解决记录

    这篇文章主要为大家介绍了vue echarts移动端踩坑解决记录,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • VUE安装依赖时报错:npm ERR! code ERESOLVE的解决

    VUE安装依赖时报错:npm ERR! code ERESOLVE的解决

    在使用npm安装项目依赖时,有时会遇到错误信息 “npm ERR! code ERESOLVE”,本文就来介绍一下VUE安装依赖时报错的解决,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10
  • Vue中this.$router.push参数获取方法

    Vue中this.$router.push参数获取方法

    下面小编就为大家分享一篇Vue中this.$router.push参数获取方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 详解如何使用 vue-cli 开发多页应用

    详解如何使用 vue-cli 开发多页应用

    本篇文章主要介绍了详解如何使用 vue-cli 开发多页应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue替代vuex的存储库Pinia详细介绍

    Vue替代vuex的存储库Pinia详细介绍

    这篇文章主要介绍了Vue替代vuex的存储库Pinia,听说pinia与vue3更配,便开启了vue3的学习之路,pinia 和 vuex 具有相同的功效, 是 Vue 的存储库,它允许您跨组件/页面共享状态
    2022-09-09

最新评论