WebSocket

218 阅读3分钟

1、为什么需要WebSocket

  • HTTP协议有一个缺陷:通信只能由客户端发起。
  • HTTP协议做不到服务器主动向客户端推送信息。

2、什么是WebSockets

1、WebSockets是一种在单个TCP连接上进行全双工通信的协议;

2、双向数据传输,实现服务器和客户端真正的双向平等对话。

3、可以创建持久性的连接。

WebSockets的应用

1、多人浏览器游戏

2、协同代码编辑

3、实时新闻网站

4、多用户的实时应用程序

3、小案例 CHAT-APP

实时计划:第一步:创建应用聊天,渲染页面;第二步:使用socket.io通信接口;第三步:实现客户端信息发送;第四步:实现服务端广播消息。

++ 结构目录图:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>胶囊在线聊天室</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://lib.baomitu.com/socket.io/2.3.0/socket.io.js"></script>
</head>
<body>
    <div id="yaobinggt-chat">
        <h2>胶囊在线聊天室</h2>
        <div id="chat-window">
            <div id="output"></div>
            <div id="feedback"></div>
        </div>
        <input type="text" id="handle" placeholder="Handle">
        <input type="text" id="message" placeholder="Message">
        <button id="send">Send</button>
    </div>
    <script src="chat.js"></script>
</body>
</html>

style.css

body{font-family: 'Nunito';}
h2{font-size: 18px;padding: 10px 20px;color: #575ed8;}
#yaobinggt-chat{max-width: 600px;margin: 30px auto;border: 1px solid #ddd;box-shadow: 1px 3px 5px rgba(0,0,0,0.05);border-radius: 2px;}
#chat-window{height: 400px;overflow: auto;background: #f9f9f9;}
#output p{padding: 14px 0px;margin: 0 20px;border-bottom: 1px solid #e9e9e9;color: #555;}
#feedback p{color: #aaa;padding: 14px 0px;margin: 0 20px;}
#output strong{color: #575ed8;}
label{box-sizing: border-box;display: block;padding: 10px 20px;}
input{padding: 10px 20px;box-sizing: border-box;background: #eee;border: 0;display: block;width: 100%;background: #fff;border-bottom: 1px solid #eee;font-family: Nunito;font-size: 16px;}
button{background: #575ed8;color: #fff;font-size: 18px;border: 0;padding: 12px 0;width: 100%;border-radius: 0 0 2px 2px;}

chat.js

//实现和服务端的连接
var socket = io.connect('http://localhost:4000');

//获取节点
var message = document.getElementById('message'),
    handle = document.getElementById('handle'),
    btn = document.getElementById('send'),
    output = document.getElementById('output'),
    feedback = document.getElementById('feedback');  
    
//事件监听
btn.addEventListener('click',()=>{
    //实现客户端向服务端传输数据
    socket.emit('chat',{
        message:message.value,
        handle:handle.value
    });
    message.value ='';
})

message.addEventListener('keypress',()=>{
    socket.emit('typing', handle.value);
})

//获取从服务器传输的数据(chat)
socket.on('chat',(data)=>{
    feedback.innerHTML=''
    output.innerHTML += `<p><strong>${data.handle}:${data.message}</strong></p>`
})
socket.on('typing',(data)=>{
    feedback.innerHTML = `<p><em>${data}正在输入...</em></p>`
})

index.js

//1引入模块(引入框架)
var express = require ('express');
var socket = require('socket.io');

//2实例化express对象
var app = express();

//3监听端口号
var server = app.listen('4000',()=>console.log('服务器正在4000端口号运行...'));

//4让服务器识别静态文件
app.use(express.static('public'));

//5设置socket.io(实例化socket对象来得到它里面的方法)
var io = socket(server);

//触发一个连接
io.on('connection',(socket)=>{
    console.log('实现socket连接',socket.id);
    //获取从客户端发送数据(chat)
    socket.on('chat',(data)=>{
        io.sockets.emit('chat',data);
    })
    //获取从客户端发送的数据(typing)
    socket.on('typing',(data)=>{
        console.log(data);
        socket.broadcast.emit('typing',data);
    })
})