基于websocket的网页聊天程序

最新推荐文章于 2024-05-01 23:03:56 发布
最新推荐文章于 2024-05-01 23:03:56 发布
阅读量457 收藏 1
点赞数
分类专栏： php 前端 文章标签： websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ldy_2017/article/details/95359830
版权
php 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
前端
2 篇文章 0 订阅
订阅专栏

前期准备

  1. 安装php和swoole扩展
  2. 安装redis和php redis扩展

利用php的swoole扩展可以轻松搭建websocket服务器，当然了解网络编程和websocket协议的童鞋也可以自己写一个websocket服务器。这里利用redis处理消息队列。
后端代码文件WebsocketClient.php：

<?php

class WebsocketClient {
    public $server;
    public function __construct() {
        $this->server = new Swoole\WebSocket\Server("0.0.0.0", 9501);
        $this->server->on('open', function (swoole_websocket_server $server, $request) {

        });
        $this->server->on('message', function (Swoole\WebSocket\Server $server, $frame) {
            $message = explode(':', trim($frame->data));
            $redis = new \Redis;
            $redis->connect('127.0.0.1',6379);
            //初始连接，接收消息
            if($message[2]==='connect'){
            	$server->push($frame->fd,'系统消息：连接已建立......');
            	$msg_array = $redis->lRange("msg_by_".$message[1],0,-1);
            	foreach ($msg_array as $key => $value) {
            		$server->push($request->fd,$value);
            	}
            	$redis->set($message[0],$frame->fd);
            	$redis->set($frame->fd,$message[0]);
            	$redis->delete("msg_by_".$message[1]);
            	return;
            }
            //发送消息,对方在线则发送
            if($to = $redis->get($message[1])){
            	$server->push($to, $message[2]);
            }else{
            	$redis->rPush("msg_by_".$message[1],$message[2]);
            }

        });
        $this->server->on('close', function ($ser, $fd) {
            $redis = new \Redis;
            $redis->connect('127.0.0.1',6379);
            $name = $redis->get($fd);
            $redis->delete($name,$fd);
        });
        $this->server->on('request', function ($request, $response) {
            // 接收http请求从get获取message参数的值，给用户推送
            // $this->server->connections 遍历所有websocket连接用户的fd，给所有用户推送
            foreach ($this->server->connections as $fd) {
                // 需要先判断是否是正确的websocket连接，否则有可能会push失败
                if ($this->server->isEstablished($fd)) {
                    $this->server->push($fd, $request->get['message']);
                }
            }
        });
        $this->server->start();
    }
}

new WebsocketClient();

在命令行运行 php WebsocketClient.php，启动websocket服务器。然后新建两个静态页面来测试，
socket_client.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Chat Online</title>
	
	<script type="text/javascript">
		window.onload = function(){
			var sender = "xiaoming";
			var receiver = 'dachun';
			var input = document.getElementById("input");
			input.focus();
			var f = 0;//标识当前消息的发送者

			//打开一个websocket
			var socket = new WebSocket("ws://192.168.33.10:9501");
			socket.onopen = function(){
				socket.send("xiaoming:dachun:connect");
			};

			//从服务器获取消息
			socket.onmessage = function(event){
				var msg = event.data;
				if(f!==2)
				{
					var node = document.createTextNode(receiver);
					var div = document.createElement('div');
					div.style.backgroundColor = '#B0B0B0';
					div.style.color = 'red';
					div.style.textAlign = 'right';				
					div.appendChild(node);
					document.body.insertBefore(div,input);
				}
				var node = document.createTextNode(msg);
				var div = document.createElement('div');		
				div.style.color = 'blue';
				div.style.padding = "10px";
				div.style.textAlign = 'right';				
				div.appendChild(node);
				document.body.insertBefore(div,input);
				input.scrollIntoView();
				f=2;
			};



			//发送消息给服务器
			input.onchange = function(){
				var msg = sender + ":" + receiver + ":"+input.value;
				if(f!==1){
					var node = document.createTextNode(sender);
					var div = document.createElement('div');		
					div.style.backgroundColor = '#9933CC';
					div.style.textAlign = 'left';				
					div.style.color = 'black';				
					div.appendChild(node);
					document.body.insertBefore(div,input);
				}

				var node = document.createTextNode(input.value);
				var div = document.createElement('div');		
				div.style.color = 'gray';
				div.style.textAlign = 'left';
				div.style.padding = "10px";				
				div.appendChild(node);
				document.body.insertBefore(div,input);

				socket.send(msg);
				input.value = "";
				f=1;
			};
			
		};
		
	</script>
</head>
<body>
	<div></div>
	<input type="" name="" id="input" style="width: 100%;">
	<!-- <button οnclick="sendMessage()">提交</button> -->
</body>
</html>

第二个文件和第一个文件一样，不同的是sender和receiver，socket_client2.html：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Chat Online</title>
	
	<script type="text/javascript">
		window.onload = function(){
			var sender = "dachun";
			var receiver = 'xiaoming';
			var input = document.getElementById("input");
			input.focus();
			var f = 0;

			//打开一个websocket
			var socket = new WebSocket("ws://192.168.33.10:9501");
			socket.onopen = function(){
				socket.send("dachun:xiaoming:connect");
			};

			//从服务器获取消息
			socket.onmessage = function(event){
				var msg = event.data;
				if(f!==2)
				{
					var node = document.createTextNode(receiver);
					var div = document.createElement('div');
					div.style.backgroundColor = '#B0B0B0';
					div.style.color = 'red';
					div.style.textAlign = 'right';				
					div.appendChild(node);
					document.body.insertBefore(div,input);
				}
				var node = document.createTextNode(msg);
				var div = document.createElement('div');		
				div.style.color = 'blue';
				div.style.padding = "10px";
				div.style.textAlign = 'right';				
				div.appendChild(node);
				document.body.insertBefore(div,input);
				input.scrollIntoView();
				f=2;
			};



			//发送消息给服务器
			input.onchange = function(){
				var msg = sender + ":" + receiver + ":"+input.value;
				if(f!==1){
					var node = document.createTextNode(sender);
					var div = document.createElement('div');		
					div.style.backgroundColor = '#9933CC';
					div.style.textAlign = 'left';				
					div.style.color = 'black';				
					div.appendChild(node);
					document.body.insertBefore(div,input);
				}

				var node = document.createTextNode(input.value);
				var div = document.createElement('div');		
				div.style.color = 'gray';
				div.style.textAlign = 'left';
				div.style.padding = "10px";				
				div.appendChild(node);
				document.body.insertBefore(div,input);

				socket.send(msg);
				input.value = "";
				f=1;
			};
			
		};
		
	</script>
</head>
<body>
	<div></div>
	<input type="" name="" id="input" style="width: 100%;">
	<!-- <button οnclick="sendMessage()">提交</button> -->
</body>
</html>

之后在浏览器打开 socket_client.html 和 socket_client2.html，测试发送：

Deepmilu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于websocket的网页版聊天室
近未来
07-26 760
WebChatRoom 首先了解websocket https://www.runoob.com/html/html5-websocket.html https://www.liaoxuefeng.com/wiki/1022910821149312/1103303693824096 最重要的时掌握以下几点： 1. WebSocket协议 WebSocket连接必须由浏览器发起，因为请求协议是一个标...
利用websocket实现一对一聊天
while(True): print('adorable')
08-07 1万+
一对一聊天websocket1. 效果展示2. 业务分析（逻辑展示...）3. 技术点 功能 即时发送消息||随时发送消息 历史消息显示 已读未读状态 1. 效果展示 由于没做登录，就以jack和rose两人聊天 两人可相互发消息 持续输出. . 当只有jack在线时 嘤嘤嘤怪上线 jack发出的消息未读改为已读 当jack离线，rose想jack了 jack上线了（jack已读） 2. 业务分析（逻辑展示…） 发送的消息默认未读 1. 加
web 聊天室程序（应用go、html、js、css， gin、websocket）
05-07
这是一个基于 Gin 框架和 WebSocket 实现的简单聊天室应用程序。它使用了 MySQL 数据库保存用户信息和聊天记录，并使用 Gorilla WebSocket 库实现了 WebSocket 通信。 主要功能： * 用户注册和登录 * 用户通过 WebSocket 连接到聊天室 * 实时消息广播给所有在线用户 * 用户在聊天室中发送消息 * 聊天室主页面，展示所有在线用户 * 保存聊天记录到 MySQL 数据库 * 离线消息读取 * 错误处理和日志记录 * 安全防范措施，如防止跨站脚本攻击和 SQL 注入攻击
Websocket 技术实践 实现在线聊天系统
qq_50909707的博客
10-13 2988
WebSocket是一种在单个TCP连接上进行全双工通信的协议。全双工：可以同时双向传输数据(B->A,A->B可以同时进行)。推送技术是建立在客户端服务器的一种机制，就是由服务器主动将信息发往客户端的技术。就像广播电台播音。
黑马 - websocket搭建在线聊天室
最新发布
白羊座的橙子
05-01 1899
websocket对象创建websocket对象相关事件websocket 对象提供的方法## 2、服务端apiTomcat 的7.0.5版本开始支持 websocket , 并且实现了Java websocket 规范。Java websocket 应用由一系列的 Endpoint组成。Endpoint 是一个java对象，代表websocket连接的一段。对于服务端，我们可以视其为处理具体websocket消息的接口。
使用WebSocket实现网页聊天室
黑马程序员官方博客
11-23 5005
WebSocket 是一种网络通信协议。RFC6455 定义了它的通信标准。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。
SpringBoot集成WebSocket实现在线聊天
陈宝子的博客
09-29 6468
WebSocket是HTML5规范中的一个部分，它借鉴了socket这种思想，为web应用程序客户端和服务端之间提供了一种全双工通信机制。同时，它又是一种新的应用层协议，WebSocket协议是为了提供web应用程序和服务端全双工通信而专门制定的一种应用层协议，其基于TCP传输协议，并复用了HTTP的握手通道。通常它表示为：ws://echo.websocket.org/?encoding=text HTTP/1.1。
WebSocket实现聊天功能
qq_51076413的博客
05-08 8395
SpringBoot + WebSocket技术实现在线聊天功能、一对一在线聊天功能，WebSocket实现一对一在线聊天，Java实现在线聊天功能
基于websocket的聊天室源码
03-04
在实现WebSocket聊天室时，还需要考虑安全性问题，例如防止XSS（跨站脚本攻击）和CSRF（跨站请求伪造），以及合理的错误处理和重连机制。同时，为了支持大量并发连接，可能需要采用集群或负载均衡技术。 总之，基于...
基于netty的websocket即时聊天程序
08-05
在这个"基于Netty的WebSocket即时聊天程序"中，我们将探讨如何利用Netty实现WebSocket协议，构建一个实时通信的聊天系统。 1. **Netty框架介绍** - Netty的核心是基于Reactor模式的事件驱动架构，它简化了并发编程...
微信小程序—基于websocket的聊天框
01-07
在本项目"微信小程序—基于websocket的聊天框"中，开发者利用了WebSocket技术来构建一个实时的一对一聊天功能。 WebSocket是一种在客户端和服务器之间建立长连接的协议，它提供了全双工通信，允许数据在两个方向上...
基于websocket的web聊天室
12-14
在这个“基于WebSocket的web聊天室”项目中，我们将会探讨如何使用Java来实现一个实时的、交互式的聊天应用程序。 首先，我们需要理解WebSocket的工作原理。WebSocket协议基于TCP，它在HTTP握手之后建立连接，并...
SpringBoot+WebSocket搭建多人在线聊天环境
qinxun2008081的博客
08-22 1395
SpringBoot+WebSocket搭建多人在线聊天环境
webSocket基本使用，实现聊天功能
一切都不太晚
11-02 1587
不想浪费你的一分一秒,gitee代码地址链接，两套都有
WebSocket 实现简单聊天功能
qq_44726587的博客
03-20 575
利用WebSocket长连接实现即使通讯，可以实现个人单独聊天，内容不需要存服务器，这是简单界面，实现简单聊天，只能和在线的人聊天，无法和不在线的聊天，js部分实现用户列表查询，发送消息，以及接收消息，有消息会提示，
基于Springboot+WebSocket+Netty实现在线聊天、群聊系统
热门推荐
wml_JavaKill的博客
04-24 2万+
此文主要实现在好友添加、建群、聊天对话、群聊功能，使用Java作为后端语言进行支持，界面友好，开发简单。
WebSocket实现简单聊天功能案例
cm777的博客
10-27 1092
一、Maven的引入 二、后端代码结构图 二（2）WebSocket及配置 二（3）控制器 三、建立HTML 四、成功截图
基于 WebSocket 打造聊天室
LEE180501的博客
12-17 765
WebSocket 是一种基于连接上进行 通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单。
c++ websocket聊天程序
01-19
引用提到了一个基于节点和Websocket的即时消息和聊天Web应用程序，引用提到了基于TCP/IP协议的SOCKET编程实现的网络聊天程序，但没有提到C++实现WebSocket聊天程序的内容。 如果你对C++实现WebSocket聊天程序感兴趣...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值