websocket 浅学
websocket ,可以实现客户端与服务器的即时通讯，比如即时聊天，获取项目中的消息提醒等（小铃铛上的标红数字提醒）
话不多说，上马奔腾，走起
只写demo，不在项目中使用：
1、初始化项目，
npm init -y
2、安装websocket
https://github.com/websockets/ws
npm install --save ws
3、服务端
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 6666 });
server.on('connection',(client) => {
client.on('message', (message)=> {
console.log( '客户端发送的消息：',message )
server.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
4、客户端
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>即时聊天</title>
</head> <body>
<Input type="text" id="txt"></Input>
<button id="btn">发送</button>
<ul id="list"></ul>
</body> </html>
<script>
let client = new WebSocket('ws://127.0.0.1:9000');
client.onopen = () => { // 打开时触发
// client.send("发送给服务端");
};
client.onmessage = (data) => { // 接收到服务端的信息
let str = `<li>${data.data}</li>`;
list.innerHTML += str;
};
client.onclose = (params) => { // 关闭时触发
console.log("close client");
};
client.onerror = (error) => { // 出错时触发
console.log(error);
};
function sendMess() {
client.send(txt.value)
txt.value = '';
console.log( client.bufferedAmount ) // 共有多少内容
}
btn.onclick = () => { // 点击时
sendMess()
}
document.onkeydown = (event)=>{ // 按下enter时
var e = event || window.event;
if(e && e.keyCode == 13){ // enter 键
sendMess()
}
} </script>
码字不易，如有帮助，请支持！
websocket 浅学的更多相关文章
- junit浅学笔记
JUnit是一个回归测试框架(regression testing framework).Junit测试是程序员测试,即所谓白盒测试,因为程序员知道被测试的软件如何(How)完成功能和完成什么样(Wh ...
- 浅学JavaScript
JavaScript是互联网上最流行的脚本语言,可广泛用于服务器.PC.笔记本电脑智能手机等设备: 对事件的反应: <!DOCTYPE html> <html> <hea ...
- opengl 入门浅学（一）
因为要做图形学的实验,又是要以OPENGL为基础,所以就稍微在网上查了一些资料. 我是带着目的去学习的,所以就没有打基础之类的学很深,浅尝. 今天试着搭简单框架,画出一个图形.大神请出门左转. #in ...
- 浅学html
数据库web端需要了解html等语言,就初浅学习一下 <!DOCTYPE html> <html> <head> <meta charset="ut ...
- WebSocket浅谈
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速 ...
- Python内存解析浅学
1.内存管理 首先理解变量,和内存特性 1. Python中无须声明变量, 2. 无须指定类型 3. 不用关心内存管理 4. 变量名会被回收 5. ...
- 【算法】浅学 LCA
参考资料 浅析最近公共祖先(LCA) 最近公共祖先 - OI Wiki [白话系列]倍增算法 一.概念 最近公共祖先称为 LCA (Lowest Common Ancestor) 它指的是在一颗树中, ...
- [大数据之Yarn]——资源调度浅学
在hadoop生态越来越完善的背景下,集群多用户租用的场景变得越来越普遍,多用户任务下的资源调度就显得十分关键了.比如,一个公司拥有一个几十个节点的hadoop集群,a项目组要进行一个计算任务,b项目 ...
- HP滤波原理浅学
今天偶然看到如果使用eviews做HP滤波,一时好奇,于是找了点资料看看~ 由于纯属自学,没有找到教材,大家姑且一看咯,也不知道对不对哈.
随机推荐
- groovy常用语法及实战
groovy语言简介 一种基于JVM的敏捷开发语言,作为编程语言可编译成java字节码,也可以作为脚本语言解释执行. 结合了Python.Ruby和Smalltalk的许多强大的特性 支持面向对象编程 ...
- 【题解】【网络流24题】汽车加油行驶问题 [P4009] [Loj6223]
[题解][网络流24题]汽车加油行驶问题 [P4009] [Loj6223] 传送门:汽车加油行驶问题 \([P4009]\) \([Loj6223]\) [题目描述] 给出一个 \(N \times ...
- mycat在windows环境下安装和启动
1.下载从如下地址下载mycat的安装包: http://www.mycat.io/ eg:Mycat-server-1.6.6.1-release-20181031195535-win.tar.gz ...
- MOOC 数据库笔记（五）：关系演算
关系演算 概述 (这部分的内容大多与离散数学有关,我没有相关基础,所以现在只是简单看一下) 关系演算是以数理逻辑中的谓词演算为基础的. 关系演算是描述关系运算的另一种思维方式. SQL语言是继承了关系 ...
- scratch学习研究心得_逐步更新
2019-10-30: Scratch对对象a克隆,不能选择克隆自己,这样可能下次一下子同时产生两个克隆体,要设置克隆a scratch3.0采用全新html5技术,图片和其他对象放大缩小,效果几乎不 ...
- python --- Socketserver N部曲(1)
曲一 socketserver 是为了简化服务器端开发而产生的,是一个高级的标准库.(背景介绍完毕,开始干) 一些概念 来自源码的一张图片,简洁又FengSao +------------+ | Ba ...
- 图像上划矩形（cv.line（）函数）
在图像上划矩形 import numpy as npimport cv2 as cvimg=np.zeros((400,400),np.uint8)cv.line(img,(100,100),(350 ...
- Java之路---Day14(内部类)
2019-10-29-23:08:00 目录 1.内部类 2.成员内部类 3.局部内部类 4.局部内部类的final问题 5.匿名内部类 内部类: what:内部类(nested classes),面 ...
- Java之路---Day13
2019-10-28-22:40:14 目录 1.Instanceof关键字 2.Final关键字 2.1Final关键字修饰类 2.2Final关键字修饰成员方法 2.3Final关键字修饰局部变量 ...
- 【转载】C#中ArrayList集合类使用Add方法添加元素
ArrayList集合是C#中的一个非泛型的集合类,是弱数据类型的集合类,可以使用ArrayList集合变量来存储集合元素信息,任何数据类型的变量都可加入到同一个ArrayList集合中,因此使用Ar ...