技术栈: vue2.0 + node + websocket( socket.io )

1. 安装依赖

初始化vue项目后输入下方指令安装依赖包

// 推荐cnpm安装
npm i vue-socket.io -S // for 客户端
npm i socket.io -S // for 服务端node

2. 新建服务端目录如下图  server / app.js

//  app.js
var app = require('http').createServer();
var io = require('socket.io')(app);
var PORT = 8081; app.listen(PORT);
/*
*新手必读
*function中的socket为每个客户端单独连接的socket实例,只通知当前连接用户
*io.sockets 通知所有连接用户
*socket.broadcast 给除了自己以外的客户端广播消息
*/
io.on('connection', function (socket) {
for(let i=0; i<100; i++){
setTimeout(()=>{
io.sockets.emit('progress',i);
console.log("当前进度为",i+1);
},300*i)
}
}) console.log('app listen at:'+PORT);

一般而言,运行node程序只需要在文件当前目录下命令行输入 node filename 即可,但是,既然是和vue脚手架一起构建,就充分利用起来。

打开package.json , 在 scripts 中 添加一行

"server": "node server/app.js",

现在,直接在vue项目的根目录运行 npm run server 命令就可以开启服务了。

3.  为了简便,直接修改vue初始化项目中的components下的HelloWorld.vue文件

// HelloWorld.vue文件

<template>
<div class="process" >
<progress max="100" :value="progressValue"></progress>
</div>
</template>
<script>
import Vue from 'vue'
import VueSocketio from 'vue-socket.io'
Vue.use(VueSocketio, 'ws://localhost:8081') // 注意和本地服务器地址及端口一致 export default {
data(){
return{
progressValue: 0, // 进度值
}
},
//(socket.on)绑定事件放在sockets中
sockets:{
// 创建连接
connect(){
console.log('连接成功啦')
},
// 监听自定义progress事件,需与服务端emit事件名一致
progress(res){
this.progressValue = res;
console.log('2222',res)
}
}
}
</script>
<style scoped>
.process { text-align:center; }
</style>

最后,运行代码

npm run server   // 开启服务

切记,不要关闭窗口,然后再新开命令行,注意,是新开一个,运行

npm run dev

就能看到一个进度条的效果了( 客户端(浏览器)发起请求,然后服务端不停传输数据,客户端监听对应事件和数据并重新渲染页面 )。

这只是很简单的一个应用,在此基础上很容易就可以改成比较多人在线聊天室的功能。

node及socket.io实现简易websocket双向通信的更多相关文章

  1. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  2. (转)使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  3. 使用Node.js+Socket.IO搭建WebSocket实时应用【转载】

    原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新 ...

  4. 基于Node.js+socket.IO创建的Web聊天室

    这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受 ...

  5. Express+Socket.IO 实现简易聊天室

    代码地址如下:http://www.demodashi.com/demo/12477.html 闲暇之余研究了一下 Socket.io,搭建了一个简易版的聊天室,如有不对之处还望指正,先上效果图: 首 ...

  6. 转载:node.js socket.io

    本文转自:http://www.xiaocai.name/post/cf1f9_7b6507  学习node.js socket.io 使用 用node.js(socket.io)实现数据实时推送 在 ...

  7. 基于node.js+socket.io+html5实现的斗地主游戏(1)概述

    一.游戏描述 说是斗地主游戏,其实是寝室自创的"捉双A",跟很多地方的捉红10.打红A差不多,大概规则是: 1.基础牌型和斗地主一样,但没有大小王,共52张牌,每人13张,这也是为 ...

  8. node相关--socket.io

    使用Socket.IO可以避免webSocket产生的问题: 传输: Socket.IO中消息的传递是基于传输的,而非全部依靠WebSocket; 它总会尝试选择对用户来说速度最快.对服务器性能来说最 ...

  9. node的socket.io类库概述

    socket.io是一个简单的小类库,该类库实现的功能类似于node中的net模块所实现的功能. 这些功能包括websocket通信,xhr轮询,jsonp轮询等. socket类库可以接受所有与服务 ...

随机推荐

  1. Android 内存溢出解决方案(OOM) 整理总结<转>

    在最近做的工程中发现加载的图片太多或图片过大时经常出现OOM问题,找网上资料也提供了很多方法,但自己感觉有点乱,特此,今天在不同型号的三款安卓手机上做了测试,因为有效果也有结果,今天小马就做个详细的总 ...

  2. angular学习笔记-关于ng-class的那些事儿

    在angular中为我们提供了3种方案处理class: 第一种:通过数据的双向绑定(一般是不推荐的) 注意:当它的值为一个字符串时,它就会把用空格分开的字符串加到class中(不推荐,与常用class ...

  3. 通过 Ansible 创建 Jenkins Server

    创建 CI 流程的第一件事应该是安装 CI 工具,本文以最常见的 Jenkins 为例,介绍如何使用 Ansible 自动安装 Jenkins Server.说明:本文的演示环境为 ubuntu 16 ...

  4. PHP正则表达式修饰符的种类及介绍

    ◆i :如果在修饰符中加上"i",则正则将会取消大小写敏感性,即"a"和"A" 是一样的.◆m:默认的正则开始"^"和结 ...

  5. vue-cli+webpack项目,修改项目名称

    使用vue-cli+webpack创建的项目,修改文件名称或者更改文件的位置,运营时会报错,是因为npm项目,在安装依赖(node_nodules)时,会记录当前的文件路径,当修改之后就无法正常启动. ...

  6. JS 上传图片 + 预览功能(一)

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  7. Strust2框架笔记01_XML配置_action编写

    目录 1.Struts2概述 1.1 什么是Struts2 1.2 Web层框架基于前端控制器模型设计 2. Struts2入门案例 2.1 Struts2的开发环境 2.2 解压开发包 2.3 创建 ...

  8. C Looooops(poj2115+扩展欧几里德)

    C Looooops Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Status Pr ...

  9. Nhibernate学习的第二天

    Fluent-Nhibernate   网站:http://www.fluentnhibernate.org/ 使用NuGet下载Fluent-Nhibernate. 1.创建实体类 2.创建实体类映 ...

  10. HDU3567

    Eight II Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 130000/65536 K (Java/Others)Total S ...