vue+websocket demo 实例
vue+websocket demo:
node 服务端启websocket服务:
// 导入WebSocket模块:
const WebSocket = require('ws'); // 引用Server类:
const WebSocketServer = WebSocket.Server; // 实例化:
const wss = new WebSocketServer({
port: 8081
}); wss.on('connection', function (ws) {
console.log(`[SERVER] connection()`);
ws.on('message', function (message) {
console.log(`[SERVER] Received: ${message}`);
ws.send(`ECHO: ${message}`, (err) => {
if (err) {
console.log(`[SERVER] error: ${err}`);
}
});
})
});
运行前后端代码:
前端页面可以看到发送websocket数据后,接收到了后端的数据,实现了双向通信。
vue+websocket demo 实例的更多相关文章
- 基于websocket vue 聊天demo 解决方案
基于websocket vue 聊天demo 解决方案 demo 背景 电商后台管理的客服 相关技术 vuex axios vue websocket 聊天几种模型 一对一模型 一对一 消息只一个客户 ...
- Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试
Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试一.下载相关安装包 1.下载nginx最新版本(nginx1.3.13版之后才支持websocket协议) 下载地址 ...
- 一个注解方式webSocket demo
前段时间在研究websocket.其中遇到了一些bug.这里跟大家分享这过程. 首先介绍一下websocket WebSocket是HTML5的一种新协议,实现了浏览器和服务器的双全工通信,能更好的节 ...
- Vue组件开发实例(详细注释)
Vue组件开发实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- SpringBoot+Vue+WebSocket 实现在线聊天
一.前言 本文将基于 SpringBoot + Vue + WebSocket 实现一个简单的在线聊天功能 页面如下: 在线体验地址:http://www.zhengqingya.com:8101 二 ...
- Vue项目入门实例
前言 本文记录Vue2.x + Element-UI + TypeScript语法入门实例 为什么要用TypeScript? 1.TypeScript是JavaScript的超集,利用es6语法,实现 ...
- vue自定义指令实例使用(实例说明自定义指令的作用)
在写vue项目的时候,我们经常需要对后台返回的数据进行大量的渲染操作,其中就包含了大量的对特殊数据的进一步处理,比如说时间戳.图片地址.特殊数据显示等等特殊数据处理改进. 其实遇到这种情况,通过Vue ...
- 【java】之 apache commons-codec 与Apache Digest demo实例,支持md5 sha1 base64 hmac urlencode
使用commons-codec 进行加密的一些操作 package com.jiepu.ApacheDigest; import java.io.FileInputStream; import org ...
- vue学习笔记 实例(二)
var data = {a: 1} var vm = new Vue({ el: '#example', data: data, created: function () { // `this` 指向 ...
随机推荐
- Mac音频播放
Mac音频播放 audioqueue播放pcm数据 http://msching.github.io/blog/2014/08/02/audio-in-ios-5/ audiounit播放pcm数据 ...
- Synchronized可重入锁通俗易懂的简单分析
可重入锁概念: 当一个线程得到一个对象锁后,再次请求此对象时时可以再次得到该对象的锁的,这也证明synchronized方法/块的内部调用本类的其他synchronized方法/块时,时永远可以得到锁 ...
- gRPC应用C++
1. gRPC简述 RPC,远程方法调用,就是像调用本地方法一样调用远程方法. gRPC是Google实现的一种RPC框架,基于HTTP/2标准设计,带来诸如双向流.流控.头部压缩.单 TCP 连接 ...
- Replication Controller 和 Replica Set
使用Replication Controller . Replica Set管理Pod Replication Controller (RC) 简写为RC,可以使用rc作为kubectl工具的快速管理 ...
- HTML&CSS基础-xHtml语法规范
HTML&CSS基础-xHtml语法规范 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源码 <!DOCTYPE html> <html> ...
- Kubernetes网络之Flannel工作原理
目录 1.Docker网络模式 1.1 bridge网络的构建过程 1.2 外部访问 2.Kubernetes网络模式 2.1 同一个Pod中容器之间的通信 2.2 不同Pod中容器之间的通信 2.3 ...
- 利用Git钩子实现代码发布
目录 1.什么是git钩子 2.安装一个钩子 3.常用的钩子脚本类型 3.1 客户端钩子 3.1.1 pre-commit 3.1.2 prepare-commit-msg 3.1.3 commit- ...
- 调用百度API返回经纬度
后台调用百度API接口生成: import java.io.BufferedReader; import java.io.IOException;import java.io.InputStreamR ...
- mysql - Centos安装MySQL
环境:Centos7.3 No.1 切换为root用户,是则略过 su root No.2 下载MySQL的repo源 wget http://repo.mysql.com/mysql-communi ...
- formData上传文件
需要将选中的xml传到后台,通过xslt转换为html html: <form id="uploadForm" enctype="multipart/form-da ...