这是我参与[第四届青训营]笔记创作活动的第六天，今天我学习并总结了一些关于websocket方面的知识点，主要包括什么是websocket,websocket特点，以及一个简单的websocket小案例。
1.什么是Websocket
WebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
- Tcp,英文全称为Transmission Control Protocol，是一种面向连接的、可靠的、基于字节流的传输层通信协议。通俗一点理解就是在网络世界里的一种信息传递方式，像是现实生活中的写信等等，是电子设备传递信息的一种方式。
- 全双工，通讯传输的一种方式。除了全双工外，还有半双工和单工。单工指数据只能单向传输，半双工指数据可以双向传输，但是同一时刻只能有一方传输数据，全双工就是指双方可以同时传数据。通俗一点可以理解为单工是单向车道，半双工是潮汐车道，全双工就是双向车道。
2.Websocket的特点
- 建立在 TCP 协议之上，服务器端的实现比较容易。
- 与 HTTP 协议有着良好的兼容性。并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
- 数据格式比较轻量，性能开销小，通信高效。
- 可以发送文本，也可以发送二进制数据。
- 没有同源限制，客户端可以与任意服务器通信。
3.简单的websocket尝试
下面是server.js里的代码，也就是我用node写的简易服务器的代码。由于只是一个练习的小测试，因此并没有什么详细的处理数据的代码，其中的handleOpen()，handleClose()，handleError()，handleConnection(ws)分别是当websocket服务打开，关闭，出错，链接上的时候的相关函数，我只写了打印一句话的代码。handleMessage()是将消息发送给每一个对象的函数
const Ws = require('ws');
;((Ws) => {
const server = new Ws.Server({ port: 8080 });
const init = () =>{
bindEvent();
}
function bindEvent(){
server.on('open', handleOpen);
server.on('close', handleClose);
server.on('error', handleError);
server.on('connection', handleConnection);
}
function handleOpen(){
console.log("Websocket open");
}
function handleClose(){
console.log("Websocket close");
}
function handleError(){
console.log("Websocket error");
}
function handleConnection(ws){
console.log("Websocket connected");
ws.on('message',handleMessage);
}
function handleMessage(msg){
server.clients.forEach(function(c){
c.send(msg.toString());
})
}
init();
})(Ws);
下面就是我在js中写的代码了，也就是前端使用websocket服务的时候需要在html使用的js中写的代码。在bindEvent函数中写下监听事件，来实现对应功能的响应。例如当发送按钮按下的时候，执行handleSendBtnClick函数，判断信息是否为空，为空则为误触，否则使用ws.send将信息传递给服务器。handleOpen函数则是用来判断函数名是否存在的，若不存在，则代表没有登录，跳转到登录页面。由于是练习用的，我直接将登录后的用户名存在了本地，在接受信息的时候，也只是简单的根据用户名判断是否为本人，再来使用不同的渲染方式。
;((doc,WebSocket,storage,location) =>{
const oList = doc.querySelector(".room")
const oMsg = doc.querySelector(".write")
const oSendBtn = doc.querySelector(".send")
const ws = new WebSocket('ws://localhost:8080')
let username = '';
const init = () => {
bindEvent();
}
function bindEvent(){
oSendBtn.addEventListener('click',handleSendBtnClick,false);
ws.addEventListener("open",handleOpen,false);
ws.addEventListener("close",handleClose,false);
ws.addEventListener("error",handleError,false);
ws.addEventListener("message",handleMessage,false);
}
function handleSendBtnClick(){
const msg = oMsg.innerHTML;
if(!msg.trim().length){
return;
}
ws.send(
JSON.stringify({
user:username,
dateTime: new Date().getTime(),
message:msg
})
);
oMsg.innerHTML = ''
}
function handleOpen(e){
console.log("Websocket open",e);
username = Localstorage.getItem("username");
if(!username){
location.href = 'entry.html';
return;
}
}
function handleClose(e){
console.log("Websocket close",e);
}
function handleError(e){
console.log("Websocket error",e);
}
function handleMessage(e){
console.log("Websocket message");
const msgData = typeof e.data =='string' ? JSON.parse(e.data) :e.data;
console.log(msgData)
oList.appendChild(crerateMsg(msgData))
}
function crerateMsg(data){
const { user , dateTime , message } = data;
const oItem = doc.createElement('div');
if(user == storage.getItem("username")){
oItem.innerHTML = `
<div class="mine">
<div class="usermessage">
<img class="headphoto" src="./img/myheader.jpg">
<div class="usernamediv">${ user }</div>
</div>
<div class="messagediv"><span class="message">${ message }</span></div>
</div>
`;
}else{
oItem.innerHTML = `
<div class="others">
<div class="usermessage">
<img class="headphoto" src="./img/headerfive.jpg">
<div class="othernamediv">${ user }</div>
</div>
<div class="messagediv"><span class="othermessage">${ message }</span></div>
</div>
`;
}
return oItem
}
init();
})(document,WebSocket,localStorage,location);
