个人对websocket的简单认知

最新推荐文章于 2022-07-08 20:35:31 发布

天使转身十一

最新推荐文章于 2022-07-08 20:35:31 发布

阅读量257

点赞数

文章标签： socket

本文链接：https://blog.csdn.net/wyhhxd/article/details/101054101

版权

在我们常用的Http协议中，客户端与服务器端的通信是靠客户端发起请求，然后服务器端收到请求再进行回应，这个过程中，客户端是主动的，服务器端是被动的。Websocket协议就不一样了，它是基于TCP的一种新的网络协议，它与Http协议不同之处就在于Websocket能实现服务器端主动推送消息到客户端，因此服务器端与客户端都能发起通信。

WebSocket是HTML5最新提出的规范，虽然主流浏览器都已经支持，但仍然可能有不兼容的情况，为了兼容所有浏览器，给程序员提供一致的编程体验，SocketIO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口，也就是说，我们在使用SocketIO时，不用担心兼容问题，底层会自动选用最佳的通信方式。因此说，WebSocket是SocketIO的一个子集。

Socket.IO是Node.js的一个模块，他提供通过WebSocket进行通信的一种简单方式，WebSocket协议很复杂，但是Socket.IO提供了服务器和客户端双方的组件。有了它，我们能更方便快捷地实现服务器端与客户端之间的实时通讯。

一.服务器端

1.安装nodejs

2.安装socket.io

3.创建server.js文件

/*创建一个HTTP服务器*/
var app = require('http').createServer();
var io = require('socket.io')(app);
var PORT = 8081; //设置端口号
app.listen(PORT);

/*监听客户端连接,回调函数会传递本次连接的socket*/
io.on('connection', function (socket) {
	/*监听登录*/
	socket.on('login',function(data){
	        /*登录成功-给当前连接发送登陆成功的事件*/
	        socket.emit('loginSuccess',data);
	        
	        /*向所有连接的客户端广播add事件*/
	        io.sockets.emit('add',data);
	        
	        /*给指定的客户端发送消息*/
			/*核心的原理就是把用户的 socketid 保存起来，想和谁聊天，就使用对方的 socketid发给他消息。*/
			io.sockets.to(socketid).emit("pmsg",data);
			
			/*给除了自己以外的客户端广播消息*/
			socket.broadcast.emit("msg",{data:"hello,everyone"}); 
			
	    }else{
	    	/*登录失败-给当前连接发送登陆失败的事件*/
	        socket.emit('loginFail','');
	    }  
	})

4.执行server.js文件

node server.js

二.h5客户端

1.新建index.html

2.在index.html中需要引用socket.io.js （需要先下载客户端的socketjs）

3.新建client.js并在index.html中引用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<title>送花给女神</title>
	<link type="text/css" rel="stylesheet" href="css/chat.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/socket.io.js"></script>
	<script type="text/javascript" src="js/client2.js"></script>
</head>
<body>
	
	<div class="login-wrap">
		<div class="login-con">
			<h3>请输入你的幸运数字</h3>
			<input type="text" placeholder="请输入你的幸运数字" id="loginName">
			<button class="login-btn">确定</button>
		</div>
	</div>
	
	<div class="chat-wrap1 hide">
		<h1>女神页面</h1>
		<div class="chat-con clearfix"></div>
		<div class="bottom1">
			<p>快送花给我</p>
		</div>
		<div class="bottom2 hide">
			<img src="11.gif" />
		</div>
	</div>
	
	<div class="chat-wrap2 hide">
		<h1>屌丝页面</h1>
		<div class="chat-con clearfix"></div>
		<div class="bottom3">
			<p>点击按钮送花给女神</p>
		</div>
		<div class="bottom4">
			<img src="11.gif" />
		</div>
		<button class="sendBtn">送花</button>		
	</div>
</body>
</html>

$(function(){
	/*建立socket连接，使用websocket协议，端口号是服务器端监听端口号*/
	var socket = io('ws://123.56.42.77:8081'); //ws=>http;wss=>https
	/*定义用户名*/
	var uname = null;
	
	/*登录*/
	$('.login-btn').click(function(){
		uname = $.trim($('#loginName').val());
	    /*向服务端发送登录事件*/
		socket.emit('login',{username:uname})
	})
	
	/*监听服务器端发送的消息*/
	/*登录成功*/
	socket.on('loginSuccess',function(data){
		...
	})

	/*登录失败*/
	socket.on('loginFail',function(){
		...
	})
})

三.小程序客户端

小程序使用websocket的官方文档

小程序使用websocket实现聊天室的代码

小结：http协议中，客户端告诉服务器“我需要什么”，然后服务器就返回给这个客户端“他需要的东西”；
websocket中，客户端还可以告诉服务器，我需要你给XX人XX东西，然后服务器就找到那个客户端，给他对应的东西
websocket主要是客户端js和服务器js，监听同一个端口号下对方的事件，然后进行对应的处理。

天使转身十一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人对websocket的简单认知

在我们常用的Http协议中，客户端与服务器端的通信是靠客户端发起请求，然后服务器端收到请求再进行回应，这个过程中，客户端是主动的，服务器端是被动的。Websocket协议就不一样了，它是基于TCP的一种新的网络协议，它与Http协议不同之处就在于Websocket能实现服务器端主动推送消息到客户端，因此服务器端与客户端都能发起通信。WebSocket是HTML5最新提出的规范，虽然主流浏览器都已...
复制链接

扫一扫