webSocket 开发流程

webSocket 开发流程

浏览器自带对象WebSocket
 #由于 自带对象WebSocket工作复杂/使用第三方
 #WebSocket库来实现此功能
 #库名 socket.io
 (1)下载socket.io服务器端第三方模块
  npm i socket.io
   下载socket.io 客户端文件
    socket.io.js
    下载地址:
    https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js
 (2)先开发服务器端程序
   2.1:创建服务器对象
   2.2:创建websocket.io对象
   2.3:监听端口 3000
   2.4:为io对象绑定事件 connection 客户端连接

app.js

// 实现多对多聊天室
// 1创建服务器对象
var app=require("http").createServer();
// 2创建io对象
var io=require("socket.io")(app)
// 3监听端口3000
app.listen(3000);
// 4为io对象绑定客户端连接事件connection
//客户端程序连接服务器
io.on("connection",(socket)=>{
    // console.log("有客户连接到服务器");
    // console.log(socket.id)
    // 接收客户端发送消息
    // 绑定事件message
    socket.on("message",(data)=>{
        console.log(data);
        // socket.emit("server","有什么可以帮到您？")
        io.emit("list","明天开始大减价")
    })
})

chat_app.js

// 多对多服务器程序
// 创建一个服务对象
var app=require("http").createServer();
// 创建一个io对象
var io=require("socket.io")(app)
// 绑定监听服务器端口3000
app.listen(3000);
// 创建变量clientCount 客户端数量
var clientCount=0;
// 为io对象绑定事件connection
io.on("connection",(socket)=>{
    console.log("有客户连接服务器")
    // clientCount加一操作
    clientCount++;
    // 创建变量nickname用户编号
    var nickname="user:"+clientCount;
    // 广播有新人加入enter
    io.emit("enter",nickname+"comes in");
    // 接收客户发送来聊天消息，广播
    socket.on("message",(data)=>{
        // console.log("客户端发来消息"+data)
         // 接收客户离开    广播   
         io.emit("list",nickname+"says:"+data)
    })
     //10:接收客户离开广播 默认:客户离开
   //关闭浏览器发送事件
  socket.on("disconnect",(data)=>{
    io.emit("leave",nickname+" leave");
 })   
   
})

 (3)开发客户端程序
   3.1:创建socket对象并且连接websocket服务器
   index.html

<script>
        //客户端连接服务器
        //发送连接请求并且触发connection连接
        var clientSocket=io("ws://127.0.0.1:3000") 
        // 4触发message事件发送消息
        clientSocket.emit("message","hello 服务端")
        // 5绑定事件serve接收服务器回复消息
        clientSocket.on("server",(data)=>{
            console.log(data)
        })
        // 6绑定广播事件
        clientSocket.on("list",(data)=>{
            console.log(data);
        })
    </script>

chart_index.html

//  连接到聊天服务器

var Socket=io("ws://127.0.0.1:3000") 
// 绑定事件 enter 有新人进入事件
 Socket.on("enter",(data)=>{
     //2.1创建元素div
     var div=document.createElement("div");
    //  2.2 将data保存到div中间
    div.innerHTML=data;
    // 2.3添加文件样式red
    div.style.color="#f00";
    // 2.4 将元素追加msg最后一个子元素
    var msg=document.getElementById("msg")
    msg.appendChild(div);
 })
//  获取发送按钮和输入框
var btn=document.getElementById("sendBtn");
var txt=document.getElementById("sentTxt");
// 为按钮绑定点击事件
btn.onclick=function(){
    // 触发事件发消息
    Socket.emit("message",txt.value)
}
// 4接收其他聊友发来的消息 
Socket.on("list",(data)=>{
    // 创建div
    var div=document.createElement("div")
    // 将聊友聊天内容保存
    div.innerHTML=data;
    // 添加样式，蓝色
    div.style.color="#00f"
    // 添加msg
    var msg=document.getElementById("msg");
    msg.appendChild(div);
})
// 绑定事件 用户离开了
Socket.on("leave",(data)=>{
    // 创建div
    var div=document.createElement("div");
    div.innerHTML=data;
    div.style.color="#0f0"
    var msg=document.getElementById("msg");
    msg.appendChild(div)
 
})