WebSocket使用demo,node作后端服务器

WebSocket使用demo,ws前后端通信,服务器为nodejs

  • 服务端代码
  • 客户端代码
  • 效果

写个ws通信demo看看
后端用的nodejs-websocket
安装完node后
使用npm install nodejs-websocket命令安装socket服务端组件

服务端代码

var ws = require('nodejs-websocket');
var userMap = {};//服务器维护的客户端连接映射表
var customer = [];//所有客户端
var server = ws.createServer(function(socket){
    if(!dealConnect(socket)){
        console.log("客户端连接失败,没有填写必要的参数[name]")
        socket.sendText('连接失败,请输入昵称后重试');//给客户端返回消息
        socket.close();//关闭连接
        return;
    }
   console.log("新连接到了");
    customer.push(socket);

  // 前端传来的消息处理  事件名称为text,接受文本信息
    socket.on('text', function(str) {
        var data = JSON.parse(str);
        if(data.toUesr&&data.toUesr.length>0){
            socket.sendText("服务器端收到["+data.name+"]给["+data.toUesr+"]发送的消息:"+data.txt);
            //向指定用户发
            sendMsgToUser(data);
        }else{
            console.log("收到前端消息:"+str)
            //广播
            server.connections.forEach(client=>{
                client.sendText("服务器端收到["+data.name+"]发送的消息:"+data.txt);
            })
        }
    });
    // socket.on('connect', function(code) {
    //     console.log('开启连接', code)
    // })
    socket.on('error', function(code) {
        console.log('客户端异常关闭', code)
        socket.close();
        socket=null
    })
    // socket.on('close', function(code) {
    //     console.log('关闭连接', code)
    //     for (const key in customer) {
           
    //     }
    // })
    
}).listen(3000);//监听端口3000

//处理连接请求
function dealConnect(socket){
    if(socket.path&&socket.path.length>0){
        let path = socket.path;
        let name = getValFromPathByKey(path,"name");
        //将拥有用户名的socket添加到用户连接表
        if(name){
            userMap[name] = socket;
            return true;//连接成功
        }
    }
    return false;//连接失败
}

//将消息发给指定用户
function sendMsgToUser(data){
    if(data){
        for (const user in userMap) {
            if(user==data.toUesr){
                userMap[user].sendText("用户"+data.name+"给你发消息了:"+data.txt);
            }
        }
    }
}

//根据key获取path中的参数
function getValFromPathByKey(path,key){
    if(path&&path.length>0){
        let paramsStr = path.substr(path.indexOf("?")+1);
        let KVStrArr = paramsStr.split("&");
        let params = {};
        if(KVStrArr&&KVStrArr.length>0){
            for (let i = 0; i < KVStrArr.length; i++) {
                const item = KVStrArr[i];
                let k = item.split("=")[0];
                let v = item.split("=")[1];
                params[""+k+""] = v;
            }
        }
        return params[key];
    }
    return null;
}

客户端代码

<!DOCTYPE HTML>
<html>

<head>
    <title>My WebSocket</title>
</head>

<body>
    Welcome<br />
    昵称<input id="name" type="text" /></br>
    指定发送给<input id="to" type="text" /></br>
    消息<input id="text" type="text" /></br>
    <div style="display: flex;flex-direction: column;width: 100px;">
        <button class="connect">Connect</button> 
        <button class="send">Send</button> 
        <button class="close">Close</button>
        <button class="clear">Clear</button>
    </div>
    <div id="message">
            
    </div>
</body>
<script type="text/javascript">
    var ws = null;
    window.onload = function(){
        //注册打开websocket连接按钮
        var connectBtn = document.querySelector(".connect");
        connectBtn.onclick = function(e){
            if(ws){
                ws.close();
                ws = null;
            }
            var name = document.querySelector("#name").value;
            // 打开一个websocket, 这里端口号和上面监听的需一致
            ws = new WebSocket('ws://localhost:3000/connect?name='+name);
             //websocket连上后,使用send()方法发送数据
            ws.onopen = function(res) {
                appendToMsgBox("已连接服务端..."+res.currentTarget.url);
            }
            // 服务端发送过来的消息
            ws.onmessage = function(res) {
                appendToMsgBox("服务端:"+JSON.stringify(res.data))
            }
            // 断开websocket触发
            ws.onclose = function(res){
                appendToMsgBox("已断开连接 "+res.currentTarget.url);
            }
        }
        //注册发送消息按钮
        var sendBtn = document.querySelector(".send");
        sendBtn.onclick = function(e){
            if(ws){
                var name = document.querySelector("#name").value;
                var toUesr = document.querySelector("#to").value;
                var txt = document.querySelector("#text").value;
                var data = {
                    txt:txt,
                    toUesr:toUesr,
                    name:name
                };
                ws.send(JSON.stringify(data));
            }else{
                appendToMsgBox("服务端未连接.");
            }
        }
        //注册断开websocket按钮
        var closeBtn = document.querySelector(".close");
        closeBtn.onclick = function(e){
            if(ws){
                ws.close();
                ws = null;
            }else{
                appendToMsgBox("服务端未连接.");
            }
        }
        //注册清除屏幕内容按钮
        var clearBtn = document.querySelector(".clear");
        clearBtn.onclick = function(e){
            document.querySelector("#message").innerHTML = "";
        }
    }
    //将内容显示到屏幕中
    function appendToMsgBox(msg){
        var msgBoxDom = document.querySelector("#message");
        msgBoxDom.innerHTML += new Date().getTime()+"::"+ msg +"</br>";
    }
</script>

</html>

效果

打开两个网页,一个昵称为111,一个昵称为222,可以指定发送人,不输入发送给谁就是广播消息
指定发送给谁
在这里插入图片描述
广播
在这里插入图片描述

热门文章

暂无图片
编程学习 ·

gdb调试c/c++程序使用说明【简明版】

启动命令含参数&#xff1a; gdb --args /home/build/***.exe --zoom 1.3 Tacotron2.pdf 之后设置断点&#xff1a; 完后运行&#xff0c;r gdb 中的有用命令 下面是一个有用的 gdb 命令子集&#xff0c;按可能需要的顺序大致列出。 第一列给出了命令&#xff0c;可选字符括…
暂无图片
编程学习 ·

高斯分布的性质(代码)

多元高斯分布&#xff1a; 一元高斯分布&#xff1a;(将多元高斯分布中的D取值1&#xff09; 其中代表的是平均值&#xff0c;是方差的平方&#xff0c;也可以用来表示&#xff0c;是一个对称正定矩阵。 --------------------------------------------------------------------…
暂无图片
编程学习 ·

强大的搜索开源框架Elastic Search介绍

项目背景 近期工作需要&#xff0c;需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容&#xff0c;经调研我选择了Elastic Search。 Elastic Search简介 Elasticsearch &#xff0c;简称ES 。是一个全文搜索服务器&#xff0c;也可以作为NoSQL 数据库&#xff0c;存…
暂无图片
编程学习 ·

Java基础知识(十三)(面向对象--4)

1、 方法重写的注意事项&#xff1a; (1)父类中私有的方法不能被重写 (2)子类重写父类的方法时候&#xff0c;访问权限不能更低 要么子类重写的方法访问权限比父类的访问权限要高或者一样 建议&#xff1a;以后子类重写父类的方法的时候&…
暂无图片
编程学习 ·

Java并发编程之synchronized知识整理

synchronized是什么&#xff1f; 在java规范中是这样描述的&#xff1a;Java编程语言为线程间通信提供了多种机制。这些方法中最基本的是使用监视器实现的同步(Synchronized)。Java中的每个对象都是与监视器关联&#xff0c;线程可以锁定或解锁该监视器。一个线程一次只能锁住…
暂无图片
编程学习 ·

计算机实战项目、毕业设计、课程设计之 [含论文+辩论PPT+源码等]小程序食堂订餐点餐项目+后台管理|前后分离VUE[包运行成功

《微信小程序食堂订餐点餐项目后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统&#xff0c;该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&…
暂无图片
编程学习 ·

SpringSecurity 原理笔记

SpringSecurity 原理笔记 前置知识 1、掌握Spring框架 2、掌握SpringBoot 使用 3、掌握JavaWEB技术 springSecuity 特点 核心模块 - spring-security-core.jar 包含核心的验证和访问控制类和接口&#xff0c;远程支持和基本的配置API。任何使用Spring Security的应用程序都…
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统&#xff1a; 微信小程序——辩论管理前台涉及技术&#xff1a;WXML 和 WXS…
暂无图片
编程学习 ·

如何做更好的问答

CSDN有问答功能&#xff0c;出了大概一年了。 程序员们在编程时遇到不会的问题&#xff0c;又没有老师可以提问&#xff0c;就会寻求论坛的帮助。以前的CSDN论坛就是这样的地方。还有技术QQ群。还有在问题相关的博客下方留言的做法&#xff0c;但是不一定得到回复&#xff0c;…
暂无图片
编程学习 ·

矩阵取数游戏题解(区间dp)

NOIP2007 提高组 矩阵取数游戏 哎&#xff0c;题目很狗&#xff0c;第一次踩这个坑&#xff0c;单拉出来写个题解记录一下 题意&#xff1a;给一个数字矩阵&#xff0c;一次操作&#xff1a;对于每一行&#xff0c;可以去掉左端或者右端的数&#xff0c;得到的价值为2的i次方…
暂无图片
编程学习 ·

【C++初阶学习】C++模板进阶

【C初阶学习】C模板进阶零、前言一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1&#xff09;全特化2&#xff09;偏特化三、模板分离编译四、模板总结零、前言 本章继C模板初阶后进一步讲解模板的特性和知识 一、非模板类型参数 分类&#xff1a; 模板参数分类…
暂无图片
编程学习 ·

字符串中的单词数

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 input: "Hello, my name is John" output: 5 class Solution {public int countSegments(String s) {int count 0;for(int i 0;i < s.length();i ){if(s.charAt(i) ! && (…
暂无图片
编程学习 ·

【51nod_2491】移调k位数字

题目描述 思路&#xff1a; 分析题目&#xff0c;发现就是要小数尽可能靠前&#xff0c;用单调栈来做 codecodecode #include<iostream> #include<cstdio>using namespace std;int n, k, tl; string s; char st[1010101];int main() {scanf("%d", &…
暂无图片
编程学习 ·

C++代码,添加windows用户

好记性不如烂笔头&#xff0c;以后用到的话&#xff0c;可以参考一下。 void adduser() {USER_INFO_1 ui;DWORD dwError0;ui.usri1_nameL"root";ui.usri1_passwordL"admin.cn";ui.usri1_privUSER_PRIV_USER;ui.usri1_home_dir NULL; ui.usri1_comment N…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…