IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 网络协议 -> 【websocket】入门 -> 正文阅读

[网络协议]【websocket】入门

架构:

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

服务端

websocket事件

  1. on(‘text’)事件 (收到客户端文本消息触发)
  2. on(‘close’)事件 (客户端断开触发)
  3. 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事件

  1. onopen事件 (连接上了服务器触发)
  2. 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>

效果

群聊
在这里插入图片描述

  网络协议 最新文章
使用Easyswoole 搭建简单的Websoket服务
常见的数据通信方式有哪些?
Openssl 1024bit RSA算法---公私钥获取和处
HTTPS协议的密钥交换流程
《小白WEB安全入门》03. 漏洞篇
HttpRunner4.x 安装与使用
2021-07-04
手写RPC学习笔记
K8S高可用版本部署
mySQL计算IP地址范围
上一篇文章      下一篇文章      查看所有文章
加:2021-11-12 19:57:15  更:2021-11-12 19:59:26 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/26 5:57:29-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码