使用nodejs、ws模块实现简单聊天室（包括简单的语音功能实现）

最新推荐文章于 2023-12-25 00:52:59 发布
最新推荐文章于 2023-12-25 00:52:59 发布
阅读量2.3k 收藏 11
点赞数 3
文章标签： nodejs websocket web 聊天室 语音
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41508508/article/details/103207217
版权

一门课程的作业，记录一下。

源码下载：https://download.csdn.net/download/qq_41508508/11991195

 

完成后的界面如图：

首先通过npm安装好ws模块：

npm install ws

接下来建立工程目录，拷贝npm路径下的模块目录node_modules目录和package.json文件到该工程目录下，同时将jquery、滚动条等相关js和css也放一起。

首先创建服务器端代码文件server.js，代码如下：

//导入模块
var ws = require("ws");

//创建服务器
var wsServer = new ws.Server({
	host: "127.0.0.1",
	port: 8182,
});
console.log("listening localhost:8182");

// 广播
wsServer.broadcast = function broadcast(str){	
	wsServer.clients.forEach(function each(client) {
			client.send(str);
		});	
	//console.log(wsServer.clients.length);	
};

//建立连接后
wsServer.on('connection',function connection(ws){	
	ws.on('message',function incoming(obj){	
		var o = JSON.parse(obj);
		switch (o.type) {
			case 'loginInfo':
				var str = JSON.stringify({
					"msg" : o.msg ,
					"type" : o.type
				});
				this.name = o.name;
				wsServer.broadcast(str);
				break;
			case 'chatInfo':
				var str = JSON.stringify({
					"name" : o.name,
					"msg" : o.msg,
					"type" : o.type
				});
				wsServer.broadcast(str);
				break;
			case 'systemInfo':
				var str = JSON.stringify({
					"msg" : o.msg ,
					"type" : o.type
				});
				wsServer.broadcast(str);
				break;
			case 'audioInfo':
				var str = JSON.stringify({
					"name":o.name,
					"recordedBlobs":o.recordedBlobs,
					"type":o.type
				});
				wsServer.broadcast(str);
				break;
			
			default:
				break;
		}		
	});
	
	ws.on('close',function (o){
		try{
			console.log(this.name);
			console.log('from server: close');
			
			var str = JSON.stringify({
				"msg" : this.name+"已下线......",
				"type" : "systemInfo"
			});
			wsServer.broadcast(str);
		}
		catch (e){
			console.log(e);
		}
	});
	
});

其中的广播函数，主要通过foreach来遍历所有客户端client，并向它们发送信息。

on('message')主要是 当客户端发送信息过来时的处理逻辑，将发送的json格式字符串解析，并根据不同的消息类型type做不同的处理。（这里的type设置得可能不太合理，可以再修改完善一下）

on('close')主要是 当客户端下线时，给其它客户端都发送下线消息。

其次还可以增添on('error')函数等，都有各自的功能。

 

接下来创建客户端的处理逻辑client.js，代码如下：

var i = 1;    
$(function(){
       
        $(".box").mCustomScrollbar({theme:"inset-2-dark"});
        var wsObj = null;
        
        var mediaRecorder = null;
        var recordedBlobs;
        var recordedAudio = document.querySelector('audio#recorded');
        var recordButton = $("#btn_record");
        recordButton.on("click",toggleRecording);
        
        //test button
//        var testButton = document.querySelector('button#test_btn');
//        testButton.onclick = testButtonPlay;
        
        var contraints = {audio:true};

        //更新滚动条
        function updateScrollbar(){
            $(".box").mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom',{
    			axis:"y", // 竖直滚动条
    			
            });
        }
        //生成随机数
    	function num(m,n){ 	 
    		return parseInt((Math.random()*(n-m)));
    	} 
        //发送信息
    	function sendMsg(){
            var msg = bb.value;
            var name = $("#name").val();
            if (name=="" || name==null){
                alert("请设置您的昵称！");
                return ;
            }
            if (msg==""){
                alert("消息不能为空！");
                return ;
            }
            var type = "chatInfo";
            var obj = {"name":name,"msg":msg,"type":type};
            wsObj.send(JSON.stringify(obj));
            bb.value = "";
    	}
        
        $("#setName").click(function(){
           
            name = $("#name").val();
            if (name=="" || name==null || name==" "){
                alert('昵称不合法！');
                return ;
            }
            
            var name = $("#name").val();   
            var msg = name + "已上线......"
            var type = "loginInfo";
            var obj = {"name":name,"msg":msg,"type":type};
            
            wsObj.send(JSON.stringify(obj));
            
        });
        
        wsObj = new WebSocket("ws://127.0.0.1:8182");   //建立连接
        wsObj.onopen = function(){  //发送请求
            console.log("连接状态",wsObj); 
            
        };
        wsObj.onmessage = function(e){  //获取后端响应
           var data = JSON.parse(e.data);
            
            switch (data.type) {
                case 'loginInfo':
                    var msg = data.msg;
                    var subDiv = $("<div></div>");
                    var msgDiv = $("<div></div>");

                    $(subDiv).addClass("item");
                    $(msgDiv).addClass("loginDiv");
                    $(msgDiv).html(msg);
                    
                    msgDiv.appendTo(subDiv);
                    subDiv.appendTo($(".mCSB_container"));
                    updateScrollbar();

                    break;
                case 'chatInfo':
                    var name = data.name;
                    var msg = data.msg;
                        
                    var subDiv = $("<div></div>");
                    var h5 = $("<h5></h5>");
                    var p = $("<p></p>");
                    
                    h5.html(name);
                    p.html(msg);
                    
                    $(p).addClass("response");
                    $(subDiv).addClass("item");
                    $(h5).addClass("pp");
                    
                    p.appendTo(subDiv);
                    h5.prependTo(subDiv);
                    subDiv.appendTo($(".mCSB_container"));
                    
                    updateScrollbar();
                    break;
                    
                case 'systemInfo':
                    var msg = data.msg;
                    var subDiv = $("<div></div>");
                    var msgDiv = $("<div></div>");
                    
                    $(subDiv).addClass("item");
                    $(msgDiv).addClass("systemDiv");
                    $(msgDiv).html(msg);
                    
                    msgDiv.appendTo(subDiv);
                    subDiv.appendTo($(".mCSB_container"));
                    updateScrollbar();
                    break;
                    
                case 'audioInfo':
                    
                    var tmprecordedBlobs = data.recordedBlobs;
                    var name = data.name;
                    // alert(name + "发来一条语音消息！");
                    var arrayBuffer = Object.keys(tmprecordedBlobs).map((el) =>{
                        return tmprecordedBlobs[el];
                    });
                    var superBuffer = new Blob([new Uint8Array(arrayBuffer)], { type: "audio/ogg; codecs=opus" });
                    //console.log(superBuffer);
                    
                    var subDiv = $("<div></div>");
                    var h5 = $("<h5></h5>");
                    var auDiv = $("<div></div>");
                    h5.html(name);
                    auDiv.html(" ");
                    $(auDiv).attr('s',i++);
                    var _auDiv_hidden = $("<audio 'hidden' class='recorded_auDiv'></audio>");
                    $(_auDiv_hidden).attr('s',i-1);

                    $(auDiv).attr('isplay',false);
                    $(auDiv).addClass("response").addClass("auDiv");    
                    $(subDiv).addClass("item");
                    $(h5).addClass("pp");

                    auDiv.appendTo(subDiv);
                    h5.prependTo(subDiv);
                    _auDiv_hidden.appendTo(subDiv);
                    subDiv.appendTo($(".mCSB_container"));
                    
                    $('div[s="'+(i-1)+'"]').get(0).addEventListener('click',(e)=>{
                        
                        var x = $(e.target).attr("s");
                        if($(auDiv).attr('isplay')=='false'){
                            $('audio[s="'+x+'"]').get(0).currentTime = 0;
                            // console.log(e.target);
                            $(auDiv).attr('isplay',true);
                            $(auDiv).css('color','red');
                            console.log($('audio[s="'+x+'"]').get(0));
                            $('audio[s="'+x+'"]').get(0).play();
                        }
                        else{
                            $('audio[s="'+x+'"]').get(0).pause();
                            $(auDiv).attr('isplay',false);
                            $(auDiv).css('color','green');
                            
                        }
                        
                    });

                    
                    $('audio[s="'+(i-1)+'"]').get(0).src = window.URL.createObjectURL(superBuffer);
                    
                    $('audio[s="'+(i-1)+'"]').get(0).addEventListener('canplay', function (e) {
                       
                            var audioDuration = e.target.duration;
                            if(audioDuration == Infinity){
                                $('audio[s="'+(i-1)+'"]').get(0).currentTime = 1e101;
                                $('audio[s="'+(i-1)+'"]').get(0).ontimeupdate = function(){
                                    this.ontimeupdate = () => {
                                        return ;
                                    };
                                    $('audio[s="'+(i-1)+'"]').get(0).currentTime = 1e101;
                                    $('audio[s="'+(i-1)+'"]').get(0).currentTime = 0;
                                };
                            }
                            
                            var t = i - 1;
                            $('div[s="'+t+'"]').html(parseInt($('audio[s="'+(i-1)+'"]').get(0).duration)+'s');

                    });
                    

                    updateScrollbar();
                    break;
                    
                default :
                    break;
            }
            
        };
        wsObj.onclose = function(e){
            console.log(e);
        };
        wsObj.onerror = function(e){
            console.log("error");
        };
        
    	$(".btn_send").click(function(){ 
    			//send:
                sendMsg();
            });

    	$(window).on('keydown', function(e) {
            if (e.which == 13) {
                sendMsg();
                return false;
            }
        });
                
        function handleSuccess(stream){
            console.log('getUserMedia() got stream: ',stream);
            window.stream = stream;
        }
        
        function handleError(error) {
            console.log("getUserMedia() error: ",error);
        }
        
        //获取音频权限
        navigator.mediaDevices.getUserMedia(contraints).then(handleSuccess).catch(handleError);
        
        
        
        function handleDataAvailable(event){
            
            recordedBlobs.push(event.data);
        }
        
        function handleStop(event){
            console.log('Recorder stopped: ',event);
            sendAudio();
        }
        
        function toggleRecording(){
            if (recordButton.text() == '发送语音'){
                // $("#btn_record").addClass('btn_record_ison');
                startRecording();
                
            }
            else{
                // $("#btn_record").removeClass('btn_record_ison');
                stopRecording();
                recordButton.text('发送语音');
                
            }
        }
        
                
        function startRecording() {
            recordedBlobs = [];
            var options = {mimeType: 'audio/webm;codecs=vp9'};
            if (!MediaRecorder.isTypeSupported(options.mimeType)){
                console.log(options.mimeType + 'is not Supported');
                options = {mimeType: 'audio/webm;codecs=vp8'};
                if (!MediaRecorder.isTypeSupported(options.mimeType)){
                    console.log(options.mimeType + 'is not Supported');
                    options = {mimeType: 'audio/webm'};
                    if (!MediaRecorder.isTypeSupported(options.mimeType)){
                        console.log(options.mimeType + 'is not Supported');
                        options = {mimeType: ''};
                    }
                }
            }
            console.log(options);
            try{
                mediaRecorder = new MediaRecorder(window.stream);     
            }
            catch (e){
                console.error('error! create MediaRecorder(): '+e);
                return ;
            }
            recordButton.text('停止') ;           
//            testButton.textContent = 'Stop';
            mediaRecorder.start(); 
            mediaRecorder.ondataavailable = handleDataAvailable;
            mediaRecorder.onstop = handleStop;

            console.log(mediaRecorder.state);
            console.log('MediaRecorder started', mediaRecorder);

        }
        
        function stopRecording(){
            mediaRecorder.stop();
            console.log('Recorded Blobs: ',recordedBlobs);
            console.log(mediaRecorder.state);
                    
        }
        
        function sendAudio(){
        
            var name = $("#name").val();
            if (name=="" || name==null){
                alert("请设置您的昵称！");
                return ;
            }
            var type = "audioInfo";
            
           var reader = new FileReader();
           var superBuffer = new Blob(recordedBlobs, { type: "audio/ogg; codecs=opus" });
           var res;
           console.log(recordedBlobs);
           console.log(superBuffer);
           reader.readAsArrayBuffer(superBuffer);
           reader.onload = function () {
               res = new Uint8Array(reader.result);
            //    console.log(res);
               var obj = {"name":name,"recordedBlobs":res,"type":type};
                wsObj.send(JSON.stringify(obj));
               
           }
                                
        }
        
        

    });

代码看起来有点长，但逻辑还是比较简单的。

文本消息的发送，主要是将昵称、消息封装成json对象，通过调用WebSocket对象send方法，将其发送给服务器端；

接收方面，主要首先判断消息类型，当其是文本消息时，将json字符串解析出来，得到昵称和信息内容，再通过jquary构造div什么的，写到html文档上。

语音信息的发送，相对来说会麻烦些。似乎ws模块不能直接发送blob对象，采用socket.io模块好像可以。

主要是调用了MediaRecorder来创建媒体对象mediaRecorder，并准备一个用于记录语音信息的Blob数组recordedBlobs[]，当调用了mediaRecorder的start方法后，触发一个handledDataAvailable事件，在其监听器上将语音数据event.data 给push进recordedBlobs数组。录制结束后，调用sendAudio()方法，将语音信息数组recordedBlobs转化成Unit8Array格式，并封装到json对象发给服务器。

接收语音信息，则是反过来的过程。将服务器发来的Unit8Array格式转为blob数组，再通过window.URL.createObjectURL创建url链接并指给 <audio>标签的src属性。

其余的主要是昵称处理，语音的点击交互什么的，通过将<audio>标签隐藏，再用div来控制语音播放，加上css3的动画，可以实现类似微信语音的效果。

 

html 文件 client.html :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
    <title>WebSocket Test</title>
</head>
<style>
    *{list-style: none;margin: 0;padding: 0;}

    .box1{
        width: 700px;
        height: 672px;
        border: 1px solid #aaa;
        margin: 0 auto;
        margin-top: 20px;
        border-radius: 10px;
        background-color: #fafafa
    }
    .box{
        width: 700px;
        height: 430px;
        overflow: auto;
        background: url("../res/bg.jpg")  no-repeat;
    }
    #bb{
        width: 672px;
        margin-top: 15px;
        border: 0px solid gray;
        outline: none;
        padding: 10px;
        resize: none;
        height: 125px;
        background-color: #fafafa

    }
    img{
        width: 700px;
    }
    hr{
        width:100%;
        	margin:0 auto;
        border: 0;
        	height: 2px;
        background-image: -webkit-linear-gradient(left, rgba(214, 214, 214, 0.3), rgba(214, 214, 214, 0.8), rgba(214, 214, 214, 0.3));
        background-image: -o-linear-gradient(left, rgba(214, 214, 214, 0.3), rgba(214, 214, 214, 0.8), rgba(214, 214, 214, 0.3));
        background-image: linear-gradient(to right, rgba(214, 214, 214, 0.3), rgba(214, 214, 214, 0.8), rgba(214, 214, 214, 0.3));

    }
    .btn{
        margin-left:450px;
    }
    .btn_send{
        margin-left: 23px;
    }
    .btn,.btn_send{
        display: inline-block;
        margin-top: 29px ;
        background: #fefefe;
        width: 120px;
        padding: 3px 0;
        border-radius: 7px;
        color: #222;
        border: 1px solid #3f3f3f;
        font-size: 14px;
        outline: none;
        text-align: center;
        line-height: 23px;
        height: 23px;
    }


    a:hover{
		background-color: #efefef;
		cursor: pointer;
	}



    .image{
        margin: 5px;
        width: 50px;
        float: left;
    }
    .pp{
        margin-left: 12px;
        margin-top: 0px;
        padding-top: 5px;
        color: #7575f5;
        margin-bottom: 1px;
        font-size: 14px;
    }

    .send{
        float: right;
        margin-left: 0;
        overflow: hidden;
    }


    .response{

        display: inline-block;
        margin-left: 8px;
        background: #eee;
        border-radius: 8px;
        padding: 7px;
        font-size: 14px;
        max-width: 400px;
        word-wrap:break-word;
        min-width: 28px;
        min-height: 19px;

    }


    .sendMsg{
        float:right;
        margin-top: 33px;
        margin-right: -16px;
    }


    .item{
        margin-bottom: 17px;

    }
    
    .noclick{
        pointer-events: none;
/*        background-color: #e5e5e5;*/
    }
    
    .zhezhao{
        position:absolute; 
        z-index:100; 
        background:#cccccc;
        filter: alpha(Opacity=50);
        -moz-opacity:0.5;
        opacity: 0.5;
        width: 700px;
        height: 672px;
    }
    
    .loginDiv,.systemDiv{
        margin-left: 20px;
        color: #5e9e8e;
        padding-top:15px;
        font-size: 14px;
        
    }
    
    .setnameDiv{
/*        display: inline-block;*/
        float: left;
        margin-top: 37px;
        margin-left: 30px;
    }
    
    #name{
        -web-kit-appearance:none;
        -moz-appearance: none;
        font-size: 0.9em;
        border: 1px solid #c8cccf;
        color: #6a6f77;
        border-radius: 4px;
        padding:2px;
    }
    #name:hover{
        border:1px solid gray;
    }
    #name:focus{
        border:1px solid gray;
        outline: 0;
    }
    
    #setName{
        min-width: 50px; 
        padding: 3px 5px; 
        background: #fff; 
        color: #5e5e5e; 
        border: 1px solid #afafaf; 
        border-radius: 3px;
        margin-top: -20px;
        
    }
    
    .auDiv{
        width: 105px;
        text-align: right;
        cursor: pointer;
        padding-right: 10px;
        color: green;
    }
    
    #btn_record{
        float: left;
        margin-top: 30px ;
        background: #fefefe;
        width: 90px;
        padding-bottom: 1px;
        border-radius: 7px;
        color: #222;
        border: 1px solid #3f3f3f;
        font-size: 14px;
        outline: none;
        text-align: center;
        line-height: 30px;
        height: 30px;
        margin-left: 175px;
    }
    
    #btn_record_ison{
        color: red;
        background-color: black;
    }
    
    #setName:hover,#btn_record:hover{
        color: #333333;
        background: #efefef;
        cursor: pointer;
    }
    #setName:focus,#btn_record:focus{
       
        outline: none;
    }
    
    
    
</style>

<link rel="stylesheet" href="jquery.mCustomScrollbar.min.css" />

<body>
        
    <div class="box1">
        <div class="zhezhao" style="display: none;"></div>
        <div class="box">
            
        </div> 
        <hr>
        <textarea name="" id="bb" cols="30" rows="10"></textarea>
        <!-- <button class="btn"> 关闭<br>(ctrl+q)</button>  -->
        <div class="setnameDiv">
            <input type='text' id="name" placeholder="请设置你的昵称..."/>
            <button id='setName'>设置昵称</button>
        </div>
        
        <button class="raDiv" id="btn_record">发送语音</button>
        <a class="btn_send">发送信息(Enter)</a> 
        
    </div> 
    
    
    <br>
    <br>

    
    
</body>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text.javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="client.js"></script>

<script>

    
</script>


</html>

由于只是小作业，也是第一次做，没怎么细心想，其实许多代码结构、功能逻辑都可以完善优化。

（另外，这个在谷歌浏览器打开是没问题的，需要确认下语音权限，其它浏览器可能或多或少有点问题）

 

booooooty
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
voice_chat:与node.js进行语音聊天
05-26
JavaScript实现语音聊天 描述 程序在 的群聊功能基础上利用webRTC技术，添加了语音群聊功能，在其他人键盘输入时，会出现类似微信的对方正在输入字样。demo： 使用的nodejs模块 express：创建一个web服务器 https：创建https连接（局域网或者外网webRTC需要https连接，具体见） socket.io：客户端与服务端实时通信 js文件 chat.js：实现按钮事件的注册、文本数据的发送等 record.js：实现语音消息的录取、播放、发送等 结构图和流程图 文本通信 详情见public/js/chat.js注释 发送数据 进入页面进行与服务器的socket连接 客户端输入文本数据 客户点击sent按钮，触发click事件，并产生chat事件准备想服务器emit soket连接发送给服务器chat事件和客户端产生的数据 接收数据 socket接受到服务
node.js中ws模块创建服务端和客户端
weixin_45821809的博客
02-26 3872
Node.js实现WebSocket
Node.js websocket/ws 详解
热门推荐
LiMubai_CN的博客
08-20 3万+
对nodejs的websocket/ws模块的一个解析
NODE_ws node实现长连接WebSocket
小歪博客
10-26 737
安装ws npm install ws node.js const WebSocket = require('ws'); //引入Server类并且实例化 const wss = new WebSocket.Server({ port: 5000 }); //定义ws服务器的端口号 //connection他是WebSocket相应事件 //在connection事件中，回调函数会传入一个WebSocket的实例，表示这个WebSocket wss.on('connection', ws =>
Node.js中npm中ws的WebSocket协议的实现
小墨蛇的博客
12-18 1833
在Node.js中，ws是一个非常有用的模块，它提供了WebSocket协议的实现。在上面的示例中，我们创建了一个WebSocket客户端，并连接到一个WebSocket服务器。在上面的示例中，我们创建了一个WebSocket服务器，并在8080端口上监听连接请求。总之，ws模块是一个非常有用的Node.js模块，它提供了WebSocket协议的实现，可以用于构建实时Web应用程序。在上面的示例中，我们创建了一个WebSocket客户端，并连接到一个WebSocket服务器。使用ws模块非常简单。
nodejs 使用nodejs-websocket模块实现点对点实时通讯
01-02
1、首先安装好nodejs-websocket npm install nodejs-websocket --save -g 2、编写服务端 var ws = require(nodejs-websocket) var AllUserData = new Array() // Scream server example: hi -> HI!!! var server = ...
Node.js实现聊天室功能
01-27
在本文中，我们将深入探讨如何使用Node.js来实现一个简单的聊天室功能。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它以其异步、事件驱动的非阻塞I/O模型而闻名，非常适合构建高性能的网络应用，如聊天室...
node_chat:nodejs聊天室
06-22
【标题】"Node.js聊天室实现" 在IT领域，Node.js是一个非常流行的开源JavaScript运行环境，它允许开发者在服务器端使用JavaScript进行编程。本项目"node_chat"是基于Node.js构建的一个聊天室应用，它是对Node.js...
NodeJs 实现简单WebSocket即时通讯的示例代码
10-16
在本文中，我们将深入探讨如何使用Node.js实现简单的WebSocket即时通讯。WebSocket是一种在客户端和服务器之间建立长连接的协议，它允许双向通信，即服务器和客户端可以同时发送数据，这对于实时应用如在线游戏、...
nodejsChat:简单的nodejs聊天，使用webosocket
05-28
1. **WebSocket API**：如何在Node.js中使用WebSocket模块（如ws库）创建服务器和客户端连接。 2. **Event Loop**：理解Node.js的事件驱动模型，如何处理异步事件和回调函数。 3. **HTML与CSS**：构建用户界面，使用...
node的ws的api详细讲解
最新发布
小墨蛇的博客
12-25 1389
WebSocket是一种在单个TCP连接上进行全双工通信的协议。Node.js中的ws模块提供了WebSocket的实现，使得Node.js可以轻松地创建WebSocket服务器和客户端。本文详细讲解了WebSocket客户端和服务端的API，包括创建WebSocket连接、监听WebSocket连接的事件、管理WebSocket连接的方法以及WebSocket实例的属性和方法。
webscoket库 ws 初体验
m0_53612276的博客
08-23 738
探究 npm ws 这个库 1. 搭建实验环境 创建项目 ws-serve ws-client ws-serve 执行命令 npm init -y npm install --save ws main.js 内容 const WebSocket = require('ws') const WebSocketServer = WebSocket.Server; const wss = new WebSocketServer({ port: 8080 }); wss.on('connection',
Node 基础学习
19年的墨先生的博客
06-16 401
node 基础学习
node引入webSocket（ws）图文教程
xuelang532777032的博客
09-15 344
别问我cnpm是啥===》
node+ws与前端WebScoket
风舞红枫的个人博客
02-23 1263
目录安装步骤1.建立连接2.客户端与服务端交互3.关闭连接 安装 npm install ws --save 步骤 1.建立连接 服务端 var WebSocket = require('ws'); var webS = new WebSocket.Server({host:'localhost',port:8080},()=>{ console.log('success') }); //客户端向服务端连接执行 webS.on('connection',(client)=>{ con
【Node.js】WebSocket服务端和客户端数据交换的数据类型问题
Otm-Z Blog
08-01 1546
WebSocket通讯时解析数据类型
【Node】Node实现网络编程
南栀的博客
12-16 2271
Node实现网络编程
node.js使用ws模块的WebSocket服务，实现点对点私聊和群聊
273.15的文章
05-29 5789
这只是的简单的例子，通过网址参数控制自己的id，和私聊的对象 http://localhost/ws.html?1:2 //我的id是1，我只能给2发消息 http://localhost/ws.html?1 //我的id是1，我一般不发，一发就是群发 http://localhost/ws.html?:1 //我没有id，我只能接收群发信息，我只能给1发消息 htt...
vue简单使用websocket，使用nodejs通过npm的 ws 模块作为服务
shuffle_boy的博客
09-22 715
vue文件 <template> <div> <div> <el-input class="username" v-model="username" clearable /> <el-button type="primary" @click="handleUser" >确认</el-button>
nodejs+ws模块实现一对一即时聊天
04-16
很高兴回答您的问题！Node.js的ws模块可以非常方便地实现一对一实时聊天。您可以使用WebSocket连接来实现双向通信，从而实现实时聊天的效果。在使用ws模块时，您需要创建WebSocket服务器和WebSocket客户端。服务器可以接收客户端发送的消息并将其广播给其他客户端。客户端可以向服务器发送消息并监听服务器传输的广播消息。同时，为了实现一对一的聊天，你需要在客户端与服务器之间建立一个中间层，用于传递对方的信息。希望这能对您有所帮助！感谢您的提问！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值