如何用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)
}
}
运行结果:(没有写样式,页面很简单)
以上就是用http和websocket创建一个多人聊天的小案列,如果对大家用微不足道的帮助,也是我的荣幸,希望各位看官点赞收藏~