技术栈: 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. CentOS7用阿里云Docker Yum源在线安装Docker

    一.参考文档 官方Docker安装文档:https://docs.docker.com/install/linux/docker-ce/centos 阿里云Docker安装文档:https://yq. ...

  2. kong+konga

    kong+kongau 注意kong1.0与之前版本API发生了很大的改动,所以是不兼容的,kongav0.14.0是匹配kong1.0+的,不兼容1.0之前的.可以根据自己的需求进行选择. kong ...

  3. 细说移动端 经典的REM布局 与 新秀VW布局

    和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局 实现单边边框1px 实现多边边框1px 实现边框圆角 实现容器固定 ...

  4. SQL 时间段转换格式

    ), ): :57AM ), ): ), ): ), ): ), ): ), ): ), ): ), ): , ), ): :: ), ): :::827AM ), ): ), ): ), ): ), ...

  5. jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配

    指定元素中包含 id 属性的, 如: $("span[id]") 代码如下: <span id="span1" name="S1"&g ...

  6. 【Spring】15、spring mvc路径匹配原则

    Ant path 匹配原则 在Spring MVC中经常要用到拦截器,在配置需要要拦截的路径时经常用到<mvc:mapping/>子标签,其有一个path属性,它就是用来指定需要拦截的路径 ...

  7. Git的概念及常用命令

    一.概念 Git是一个分布式的版本控制工具,区别于集中式管理的SVN. 二.优势 每个开发者都拥有自己的本地版本库,可以在本地任意修改代码.创建分支,不会影响到其他开发者的使用: 所有版本信息均保存在 ...

  8. oracle数据库相关概念介绍

    数据库相关概念介绍: 问题: 数据存储:变量(基本类型,引用类型) 基本类型:少量数据 引用类型:保证数据的完整性 数据源: 声明直接赋值 IO流从硬盘中读取 java在处理数据时,需要从硬盘中读取数 ...

  9. link标签链接CSS和@import加载的区别

    link:基本语法 <link rel="stylesheet" href="路径"> @import 基本语法 <style> @im ...

  10. 【代码笔记】Web-HTML-布局

    一, 效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...