如何用http+websocket创建一个简单的聊天室

本文链接：https://blog.youkuaiyun.com/qq_46063425/article/details/119207070

如何用http+websocket创建一个简单的聊天室

了解一下什么是websocket？？？

websocket 是一种在单个TCP链接上进行双全共通信的协议。

对于通信协议大家可能第一时间想到就是HTTP协议，这里大家就会有一个疑问，我们已经学过了HTTP通信协议为什么还要来学习websocket呢？？

嘿嘿，因为HTTP协议有一个缺陷，它的通信依赖于客户端用户的发起请求，然后服务器才能响应请求。而websocket协议弥补了这一个缺陷，它是双全通信，它的通信可以是客户端发起，也可以是服务器发起推送。

举个栗子，大家都有用过QQ或者微信等聊软件，当你向朋友发送一条信息，你的朋友不管有没有在玩手机，他的手机都会收到你发送的那条消息（但这里大家不要认为我和朋友之间是直接进行通信的哟，这里还有一个中间人—服务器），这就是服务器把你发送的消息推送给你的朋友。

在这里插入图片描述

下面是一个聊天室的相关代码：(http+websocket)

对websocket不是很了解的伙伴点击这里WebSocket 教程 - 阮一峰的网络日志 (ruanyifeng.com)

后端代码：

（我这里使用的是node搭建的后台，这里需要下载websocket依赖 npm i websocket --save-dev）

// 1、引入http模块，搭建http服务器，
var http = require('http')
var server = http.createServer();

// 2、这里我们监听3000端口，如果该端口被占用，可以换成其他的端口
server.listen(3000,function(){
	console.log("3000端口已经启动.....")
})
//3、引入websocket，搭建websocket服务器,websocket服务器是建立在http服务器之上的
var WebSocket = require('websocket').server;
var wsServer = new WebSocket({httpServer:server});
//4、监听连接请求，建立连接
var client = [];//用来存储连接的客户端
wsServer.on('request',function(webSocketRequest){
	//当前连接 回话
	var connection = webSocketRequest.accept(null,'accepted-origin');//第一个参数是子协议，没有就填null
	client.push(connection);//connection表示当前用户，每一连接形成就会有一个用户
	//监听客户端传递过来的信息
	connection.on('message',function(msg){//这里的msg包含两个属性，一个是type，一个是data
		if(msg.type == 'utf8')
		{
			//向客户端推送消息
			//connection.sendUTF(msg.utf8Data);这里是给当前用户推送，
			client.forEach(function(item){
				item.sendUTF(msg.utf8Data);
			})
		}
	})
//5、监听用户断开连接
	connection.on('close',function(reasonCode,description){
		//获取当前断开用在client里的索引值
		var index = client.indexOf(connection);
		//将该用户移除client数组
		client.splice(index,1);
	})
})

客户端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多终端通信</title>
	</head>
	<body>
		<ul id="content"></ul>
		<input type="text" name="" id="msg" value="" />
		<input type="button" id="btn" value="发送"/>
	</body>
    <script src = '01.js'></script>
</html>

window.onload = function(){
	//首先获取标签
	var ul = document.getElemetById('content');
	var input = document.getElementById('msg');
	var btn = document.getElementById('btn');
	
	//创建一个websocket对象，该对象有两个值一个url，一个是子协议（不是必填）
	var ws = new WebSocket('ws://127.0.0.1:3000')
	//监听服务器端推送的消息
	ws.onmessage = function(res){
		//将信息添加到ul中显示
		ul.innerHTML += `<li>${res.data}</li?`
	}
	//给btn绑定点击事件
	btn.onclick = function(){
		//获取信息向服务器发送信息
		var value = input.value;
		if(value.trim == '')
		{
			alert('输入的信息不能为空');
			return;
		}
		ws.send(value)
	}
}

运行结果：（没有写样式，页面很简单）

在这里插入图片描述