Vue.js如何使用Socket.IO的示例代码

在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转)、订单语言提醒等,这些都是建立在两端实时通信的基础上的。对前端而言,来实现浏览器和服务器实时通信,最好的选择就是Socket.IO库,能够快速的实现两端实时通信功能。

1、什么是 Socket.IO?

Socket.IO 是一个WebSocket库,可以在浏览器和服务器之间实现实时,双向和基于事件的通信。它包括:Node.js服务器库、浏览器的Javascript客户端库。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用,非常方便和人性化,而且支持的浏览器最低达IE5.5

2、Socket.IO 主要特点

(1)、支持浏览器/Nodejs环境 (2)、支持双向通信 (3)、API简单易用 (4)、支持二进制传输 (5)、减少传输数据量

3、Vue.js 中 Socket.IO的使用

(1)客户端

npm install vue-socket.io --save 

main.js添加下列代码

import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({
  debug: true,
  // 服务器端地址
  connection: 'http://localhost:3000',
  vuex: {
  }
}))

发送消息和监听消息

//发送信息给服务端
this.$socket.emit('login',{
 username: 'username',
 password: 'password'
});

//接收服务端的信息
this.sockets.subscribe('relogin', (data) => {
 console.log(data)
})

(2)服务端

服务端,我们基于express搭建node服务器。

npm install --save express
npm install --save socket.io

index.js文件

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
 res.send('<h1>你好web秀</h1>');
});

io.on('connection',function(socket) {
 //接收数据
 socket.on('login', function (obj) {
   console.log(obj.username);
   // 发送数据
   socket.emit('relogin', {
    msg: `你好${obj.username}`,
    code: 200
   });
 });
});

http.listen(3000, function(){
 console.log('listening on *:3000');
});

然后启动服务端服务

node index.js

客户端即可查看效果。

4、Socket.IO有哪些事件

io.on('connect', onConnect);

function onConnect(socket){

 // 发送给当前客户端
 socket.emit(
  'hello',
  'can you hear me?',
  1,
  2,
  'abc'
 );

 // 发送给所有客户端,除了发送者
 socket.broadcast.emit(
  'broadcast',
  'hello friends!'
 );

 // 发送给同在 'game' 房间的所有客户端,除了发送者
 socket.to('game').emit(
  'nice game',
  "let's play a game"
 );

 // 发送给同在 'game1' 或 'game2' 房间的所有客户端,除了发送者
 socket.to('game1').to('game2').emit(
  'nice game',
  "let's play a game (too)"
 );

 // 发送给同在 'game' 房间的所有客户端,包括发送者
 io.in('game').emit(
  'big-announcement',
  'the game will start soon'
 );

 // 发送给同在 'myNamespace' 命名空间下的所有客户端,包括发送者
 io.of('myNamespace').emit(
  'bigger-announcement',
  'the tournament will start soon'
 );

 // 发送给指定 socketid 的客户端(私密消息)
 socket.to(<socketid>).emit(
  'hey',
  'I just met you'
 );

 // 包含回执的消息
 socket.emit(
  'question',
  'do you think so?',
  function (answer) {}
 );

 // 不压缩,直接发送
 socket.compress(false).emit(
  'uncompressed',
  "that's rough"
 );

 // 如果客户端还不能接收消息,那么消息可能丢失
 socket.volatile.emit(
  'maybe',
  'do you really need it?'
 );

 // 发送给当前 node 实例下的所有客户端(在使用多个 node 实例的情况下)
 io.local.emit(
  'hi',
  'my lovely babies'
 );
};

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

(0)

相关推荐

  • Vue Socket.io源码解读

    背景 有一个项目,今年12月份开始重构,项目涉及到了socket.但是socket用的是以前一个开发人员封装的包(这个一直被当前的成员吐槽为什么不用已经千锤百炼的轮子).因此,趁着这个重构的机会,将vue-socket.io引入,后端就用socket.io.我也好奇看了看vue-socket.io的源码(我不会说是因为这个库的文档实在太简略了,我为了稳点去看源码了解该怎么用) 开始 文件架构 我们主要看src下的三个文件,可以看出该库是用了观察者模式 Main.js // 这里创建一个obser

  • vue + socket.io实现一个简易聊天室示例代码

    vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了.功能虽然不多,但还是有收获.设计和实现思路较为拙劣,恳请各位道友指正. 可以达到的需求 能查看在线用户列表 能发送和接受消息 使用到的框架和库 socket.io做为实时通讯基础 vuex/vue:客户端Ui层使用 Element-ui:客户端Ui组件 类文件关系图 服务端: 客户端: 服

  • vue+socket.io+express+mongodb 实现简易多房间在线群聊示例

    项目简介 主要是通过做一个多人在线多房间群聊的小项目.来练手全栈技术的结合运用. 项目源码:chat-vue-node 主要技术: vue2全家桶 + socket.io + node(express) + mongodb(mongoose) 环境配置: 需安装配置好 node,mongodb环境(参考:http://www.jb51.net/article/109449.htm); 建议安装 Robomogo 客户端来管理mongodb数据. 编译运行: 1.开启MongoDB服务,新建命令行

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

    一.Node中socket.io基础 1.是什么 Socket.IO类库,是在服务器和浏览器之间提供一个共享接口,其可以用于实现以下几种通信方式: HTML5中的WebSocket通信 Flash中使用的WebSocket通信 XHR轮询 JSONP轮询 Forever Iframe 在通信时,客户端与服务器端可以使用相同的API 2.怎么用 原理:创建Scoket.IO服务器,该服务器依赖于一个已经创建的HTTP服务器 服务器端引入 var http=require('http') var s

  • Vue.js如何使用Socket.IO的示例代码

    在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转).订单语言提醒等,这些都是建立在两端实时通信的基础上的.对前端而言,来实现浏览器和服务器实时通信,最好的选择就是Socket.IO库,能够快速的实现两端实时通信功能. 1.什么是 Socket.IO? Socket.IO 是一个WebSocket库,可以在浏览器和服务器之间实现实时,双向和基于事件的通信.它包括:Node.js服务器库.浏览器的Javascript客户端库.它会

  • nginx+vue.js实现前后端分离的示例代码

    1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,

  • node.js中的socket.io入门实例

    关于websocket等反向ajax技术介绍 在实时web应用中,常见的方法是反向Ajax.反向Ajax的定义: 反向Ajax(Reverse Ajax)本质上则是这样的一种概念:能够从服务器端向客户端发送数据.在一个标准的HTTP Ajax请求中,数据是发送给服务器端的,反向Ajax可以某些特定的方式来模拟发出一个Ajax请求,这些方式本文都会论及,这样的话,服务器就可以尽可能快地向客户端发送事件(低延迟通信). 反向Ajax技术主要有两点内容:一是服务器端保持住TCP连接直到其有数据发送给客

  • node.js中使用socket.io的方法

    使用socket.io的使用创建一个socket.io服务器即可.但是该服务器依赖于一个已经创建的http服务器. 在http服务器运行之后,使用listen方法为该http服务器附加一个socket.io服务器. 复制代码 代码如下: var sio=require("scoket.io"); var socket=sio.listen(server); socket就是在server基础上创建的一个socket.io服务器. 当客户端与服务器端建立连接时,触发socket.io服务

  • node.js中使用socket.io制作命名空间

    如果开发者想在一个特定的应用程序中完全控制消息与事件的发送,只需要使用一个默认的"/"命名空间就足够了.但是如果开发者需要将应用程序作为第三方服务提供给其他应用程序,则需要为一个用于与客户端连接的socket端口定义一个独立的命名空间. io.of(namespace) 制作两个命名空间 chat和news然后在客户端相互发送信息. 复制代码 代码如下: var express=require("express"); var http=require("h

  • ajax请求+vue.js渲染+页面加载的示例

    1.导入js <script type="text/javascript" src="<c:url value="/resources/lib/jquery/jquery-1.11.0.min.js" />"></script> <!--标准mui.css--> <link href="<c:url value=" rel="external nofollo

  • Vue.js 中制作自定义选择组件的代码附演示demo

    定制 select 标签的设计非常困难.有时候,如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本,那是不可能的.在本文中,你将学习如何构建使用完全自定义 CSS 设置样式的 Vue.js 组件. Demo: https://codesandbox.io/s/custom-vuejs-select-component-8nqgd HTML <template> <div class="custom-select" :tabindex=&

  • 使用Vue调取接口,并渲染数据的示例代码

    刚接触vue.js框架的时候,很伤脑筋.今天整理一下post/get两种方式,简单的调取数据库数据,并进行渲染,希望帮助大家! 首先,在HTML页面引入: //引入vue.js文件 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 引入vue-resource.min.js文件,就可以引入接口方法了 <script src="https://cdn.st

  • Vue+mui实现图片的本地缓存示例代码

    下面一段代码给大家分享基于Vue+mui实现图片的本地缓存,具体代码如下所示: const menu = { state: { products: {}, GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG'] }, mutations: { get_product: function (state, products) { //商品列表 state.products = products; for(let i = 0; i < state.products.l

  • vue 2.0 购物车小球抛物线的示例代码

    本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下: 备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <transition name="drop" v-for="ball in balls" @before-enter="beforeDrop" @enter="droppi

随机推荐