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 浅学的更多相关文章

  1. junit浅学笔记

    JUnit是一个回归测试框架(regression testing framework).Junit测试是程序员测试,即所谓白盒测试,因为程序员知道被测试的软件如何(How)完成功能和完成什么样(Wh ...

  2. 浅学JavaScript

    JavaScript是互联网上最流行的脚本语言,可广泛用于服务器.PC.笔记本电脑智能手机等设备: 对事件的反应: <!DOCTYPE html> <html> <hea ...

  3. opengl 入门浅学(一)

    因为要做图形学的实验,又是要以OPENGL为基础,所以就稍微在网上查了一些资料. 我是带着目的去学习的,所以就没有打基础之类的学很深,浅尝. 今天试着搭简单框架,画出一个图形.大神请出门左转. #in ...

  4. 浅学html

    数据库web端需要了解html等语言,就初浅学习一下 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  5. WebSocket浅谈

    WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速 ...

  6. Python内存解析浅学

    1.内存管理 首先理解变量,和内存特性 1.       Python中无须声明变量, 2.       无须指定类型 3.       不用关心内存管理 4.       变量名会被回收 5.    ...

  7. 【算法】浅学 LCA

    参考资料 浅析最近公共祖先(LCA) 最近公共祖先 - OI Wiki [白话系列]倍增算法 一.概念 最近公共祖先称为 LCA (Lowest Common Ancestor) 它指的是在一颗树中, ...

  8. [大数据之Yarn]——资源调度浅学

    在hadoop生态越来越完善的背景下,集群多用户租用的场景变得越来越普遍,多用户任务下的资源调度就显得十分关键了.比如,一个公司拥有一个几十个节点的hadoop集群,a项目组要进行一个计算任务,b项目 ...

  9. HP滤波原理浅学

    今天偶然看到如果使用eviews做HP滤波,一时好奇,于是找了点资料看看~ 由于纯属自学,没有找到教材,大家姑且一看咯,也不知道对不对哈.

随机推荐

  1. [笔记] 二级指针(pointer to pointer)

    // 1.pointer to pointer.cpp #include "stdafx.h" #include <stdlib.h> int _tmain(int a ...

  2. 单词uranolite陨石uranolite英语

    陨石(uranolite)是指来自地球以外太阳系其他天体的碎片,绝大多数来自位于火星和木星之间的小行星,少数来自月球(40块)和火星(40块).全世界已收集到4万多块陨石样品,石陨石主要成分是硅酸盐. ...

  3. 【题解】Luogu P5327 [ZJOI2019]语言

    原题传送门 看到这种树上统计点对个数的题一般是线段树合并,这题也不出意外 先对这棵树进行树剖,对于每次普及语言,在\(x,y\)两点的线段树上的\(x,y\)两位置打\(+1\)标记,在点\(fa[l ...

  4. golang---命令源码文件与命令行参数

    命令源码文件是程序的运行入口,是每个可独立运行的程序必须拥有的. import "flag"  flag包实现了命令行参数的解析.每个参数认为一条记录,根据实际进行定义,到一个se ...

  5. Java的表达式和运算符

    一.算术运算符 运算符 + - * / % 说明 加 减 乘 除 取模(余数) 例子 1+2 5-3 20*5 6/4 30%9 结果 3 2 100 1 3 int x = 10; int y = ...

  6. 让div在body中任意拖动

    HTML代码 <div id="idOuterDiv" class="CsOuterDiv"> </div> CSS代码 body { ...

  7. 2019 东方财富网java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.东方财富网等公司offer,岗位是Java后端开发,因为发展原因最终选择去了东方财富网,入职一年时间了,也成为 ...

  8. Beego 学习笔记15:布局页面

    页面布局 1>     一个html页面由:head部分,body部分,内部css,内部js,外联css,外联的js这几部分组成.因此,一个布局文件也就需要针对这些进行拆分. 2>     ...

  9. ObjC: 源文件的组织

    转自:http://marshal.easymorse.com/tech/objc-%e6%ba%90%e6%96%87%e4%bb%b6%e7%9a%84%e7%bb%84%e7%bb%87 最简单 ...

  10. android studio学习---快捷键

    快捷键学习  TIPS: 1.异常代码块  或者自定义代码块结构  Ctrl+Alt+T  或者   File | Settings | File and Code Templates When yo ...