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 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
Save a File Using a File Save Dialog Box
Jun 18 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 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
深入array multisort排序原理的详解
2013/06/18 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
python多进程操作实例
2014/11/21 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
如何利用Python识别图片中的文字
2020/05/31 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
PHP如何删除一个Cookie值
2012/11/15 面试题
业务主管岗位职责范本
2013/12/25 职场文书
幼儿教师国培感言
2014/02/19 职场文书
教师节大会主持词
2015/07/06 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫