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


Posted in Javascript onJuly 25, 2018

一、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');
 }); 
});

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

Javascript 相关文章推荐
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
浅谈javascript回调函数
Dec 07 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
详解Vue源码学习之callHook钩子函数
Jul 25 #Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 #Javascript
浅析JS中回调函数及用法
Jul 25 #Javascript
详解使用mpvue开发github小程序总结
Jul 25 #Javascript
详解mpvue开发小程序小总结
Jul 25 #Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 #Javascript
You might like
PHP中对数据库操作的封装
2006/10/09 PHP
php a simple smtp class
2007/11/26 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php xml文件操作代码(一)
2009/03/20 PHP
php分页函数示例代码分享
2014/02/24 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
简单的项目建议书模板
2014/03/12 职场文书
职工代表大会主持词
2014/04/01 职场文书
文秘个人求职信范文
2014/04/22 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书