(一) 本节知识点
讲述webSocket
实现聊天室
(二) websocket讲述
HTTP协议是无状态的，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。
我们可以非常轻松的捕获浏览器上发生的事件（比如用户点击了盒子），这个事件可以轻松产生与服务器的数据交互（比如Ajax）。但是，反过来却是不可能的：服务器端发生了一个事件，服务器无法将这个事件的信息实时主动通知它的客户端。只有在客户端查询服务器的当前状态的时候，所发生事件的信息才会从服务器传递到客户端。
WebSocket协议能够让浏览器和服务器全双工实时通信，互相的，服务器也能主动通知客户端了。
WebSocket的原理非常的简单：利用HTTP请求产生握手，HTTP头部中含有WebSocket协议的请求，所以握手之后，二者转用TCP协议进行交流（QQ的协议）。现在的浏览器和服务器之间，就是QQ和QQ服务器的关系了。
(三) 在这里要使用express框架和一个包叫做socket.io 首先所有的文件必须在服务器上
- (1) 下载socket.io这个包
npm install socket.io --save
- (2)服务器端代码
//socket.io公式：
var http = require('http').Server(app);
var io = require('socket.io')(http);
io.on("connection",function(socket){
socket.on("chat",function(msg){
//把接收到的msg原样广播
console.log(msg);
io.emit("chat",msg); //要是socket就是点对点
});
});
//这里千万注意是http在监听
http.listen(3000);
- (3)客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟短信调用</title>
</head>
<body>
<style>
*{margin:0px;padding:0px;}
.container{width:1000px;height:700px;border:1px solid #ccc;border-radius: 10px;box-shadow: 5px 2px 10px #ccc;position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);}
#bottom{width:100%;height:100px;position:absolute;bottom:0px;left:0px;}
#button1{width:20%;height:100px;text-align:center;line-height:99px;font-size:30px;position:absolute;left:0px;top:0px;}
#text1{width:60%;height:99px;line-height:99px;position:absolute;left:20%;top:0px;font-size:55px;}
#send{width:20%;height:100px;text-align:center;line-height:100px;font-size:30px;position:absolute;left:80%;top:0px;}
#main{width:100%;height:600px;list-style-type: none;overflow: auto;}
</style>
<body>
<div class="container">
<!--顶部区域-->
<ul id="main">
</ul>
<!--顶部区域-->
<!--底部开始-->
<div id="bottom">
<button id="button1">我说:</button>
<input type="text" id="text1">
<button id="send">发送</button>
</div>
<!--底部开始-->
</div>
</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script> <!--这个文件不用你引入因为服务器端现在的包里面就包含了这个文件-->
<script>
var socket = io();
$("#send").on("click",function(){
var value = $("#text1").val();
socket.emit("chat",{
"content" : value
})
})
socket.on("chat",function(msg){
$("#main").prepend("<li><b>" + msg.content + "</b></li>");
});
</script>
</body>
</html>
emit表示发送 on表示监听
以上就是最浅显的基于websocket的聊天室
