【websocket】入门

钱敏大好人

于 2021-11-10 21:09:13 发布

阅读量2.5k

点赞数

分类专栏： qt ros c++ 文章标签： websocket 网络协议网络

本文链接：https://blog.youkuaiyun.com/qianmin12345678/article/details/121256748

版权

c++ 同时被 3 个专栏收录

24 篇文章

订阅专栏

ros

22 篇文章

订阅专栏

13 篇文章

订阅专栏

该博客介绍了如何使用Node.js和WebSocket构建一个简单的群聊应用。服务端通过监听'文本'、'关闭'和'错误'事件来处理客户端的消息、断开连接和错误情况。客户端则利用'打开'和'消息'事件进行连接、发送和接收消息。用户输入名字并发送消息后，聊天记录将在页面上实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

架构:

Nodejs运行server.js
浏览器直接运行client.html

服务端

websocket事件

on(‘text’)事件（收到客户端文本消息触发）
on(‘close’)事件（客户端断开触发)
on(‘error’)时间 (连接错误信息触发)

websocket方法

send()

服务端代码

var ws=require('nodejs-websocket')

var server=ws.createServer(function (conn){
    console.log("new connection");
    //定义conn的text事件
    conn.on('text',function (str){
        console.log(str);
        // broadcast(str);
        var data=JSON.parse(str);
        switch (data.type){
            case 'user_name':
                conn.nickname=data.name;
                broadcast(data.name + ': 加入了房间');
                break;
            case 'chat_msg':
                broadcast(conn.nickname + ': ' + data.text);
                break;
            default:
                break;
        }
    })
    //定义conn的错误事件
    conn.on('error',function (e){
        console.log('one client close');
    })
    //定义conn的断开连接事件
    conn.on('close',function (){
        broadcast(conn.nickname +'离开了房间');
    })

    // setTimeout(function (){
    //     conn.sendText('i am server');
    // },500);

}).listen(8088);


//广播函数
function broadcast(str){
    server.connections.forEach(function (conn){
        conn.send(str);
    })
}

客户端

websocket事件

onopen事件（连接上了服务器触发）
onmessage时间 (收到服务器信息触发)

websocket方法

send()

客户端代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>
		<input type="text" id="txt_name">
		<button id="btn_setname">设置</button>
		<input type="text" id="txt_msg_to_send">
		<button id="btn_send_msg" type="button">发送</button>
		
		<div id="container">
		
		</div>
	</body>
</html>

<script>
	var ws=null;
	//初始化连接
	document.getElementById('btn_setname').onclick=function (){
		//只能连接一次
		document.getElementById('btn_setname').setAttribute('disabled',true);
		document.title="用户"+document.getElementById('txt_name').value;
		// 取名字
		var name=document.getElementById('txt_name').value;
		if(name == null){
			return alert('名字不能为空！')
		}
		//连接
		ws=new WebSocket('ws://localhost:8088');
		//发送名字
		ws.onopen = function (){
			ws.send(JSON.stringify({
				name:name,
				type:'user_name'
			}));
		}
		//发送聊天内容
		document.getElementById('btn_send_msg').onclick=function (){
			var tmp=document.getElementById('txt_msg_to_send').value;
			ws.send(JSON.stringify({
				text:tmp,
				type:"chat_msg"
			}));
			//清空
			document.getElementById('txt_msg_to_send').value='';
		}
		//接受服务消息
		ws.onmessage = function (e){
			var p = document.createElement('p');
			p.innerHTML=e.data;
			var container=document.getElementById('container')
			container.appendChild(p);
		}
	}
</script>

效果

群聊
在这里插入图片描述