• webscoket学习

    webscoket基本使用 

    WebSocket - Web API 接口参考 | MDN

     使用node编写webscoket服务

    nodejs-webscoket 在github的地址↓ 

    GitHub - sitegui/nodejs-websocket: A node.js module for websocket server and client

    ws和socket.io 是wbscket的两个库

    仓库地址：learn-webscoket: webscoket学习 ，前台使用原生写法 基于 webscoket 类

    ws库+html 实现聊天

    后台使用的是ws库:

    1. const WebSocket = require('ws');
    2. const wss = new WebSocket.Server({ port: 8088 }); // websocket的端口
    3.  
    4. let i = 0
    5. wss.on('connection', function connection(ws) {
    6.     i++
    7.     console.log("当前链接人数是" + i);
    8.     ws.on('message', function incoming(message) {
    9.         console.log('服务端接受到数据：', message);
    10.         message = message.toString()
    11.         // console.log(message.toString());
    12.         // 广播给所有用户
    13.         wss.clients.forEach(function each(client) {
    14.             if (client.readyState === WebSocket.OPEN) {
    15.                 // client.send(JSON.stringify(message));
    16.                 client.send(message);
    17.             }
    18.         });
    19.     });
    20.     // ws.send('something');
    21. });

    前台 基于WebSocket 类实现：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.  
    11.     style>
    12. head>
    13.  
    14. <body>
    15.     <input id="message-text" type="text">
    16.     <button id="send">发送button>
    17.     <button id="close">关闭button>
    18.     <div id="message-list">div>
    19. body>
    20. <script type="text/javascript">
    21.     var ws = new WebSocket('ws://localhost:8088');
    22.     ws.onopen = function (evt) { // 连接建立触发
    23.         console.log('建立连接，状态:' + ws.readyState);
    24.     };
    25.  
    26.     ws.onmessage = function (evt) { // 服务端返回数据触发
    27.         // console.log(String.toString(evt.data));
    28.         var data = JSON.parse(evt.data)
    29.         console.log(data);
    30.         console.log("状态：" + ws.readyState + "；服务端返回数据:", data);
    31.         var list = document.getElementById("message-list");
    32.         list.insertAdjacentHTML("beforeEnd", `
      ${data.message}
      `      );
    33.     };
    34.  
    35.     ws.onerror = function (evt) { // 通信发生错误触发
    36.         console.log(evt);
    37.         console.log('发生错误，状态:' + ws.readyState);
    38.     };
    39.  
    40.     ws.onclose = function (evt) { // 连接关闭触发
    41.         console.log(evt);
    42.         console.log("连接关闭，状态：", ws.readyState);
    43.     };
    44.  
    45.     document.getElementById("send").onclick = function () {
    46.         var val = document.getElementById("message-text").value
    47.         var data = {
    48.             message: val
    49.         }
    50.         console.log(data);
    51.         ws.send(JSON.stringify(data)); // 推送数据到服务器, 数据类型必须为字符串
    52.         // console.log('我发送成功了');
    53.     }
    54.  
    55.     document.getElementById("close").onclick = function () {
    56.         ws.close(); // 关闭连接
    57.     }
    58. script>
    59.  
    60. html>

    socket.io + html实现聊天（群聊）

    参考：scoket.io实现群聊、私聊_小宇宙chris_310的博客-CSDN博客_scoketio

    js部分:

    1. const app = require('express')()
    2. const http = require("http").Server(app);
    3. const io = require("socket.io")(http,{
    4.     cors:true
    5. });
    6.  
    7. http.listen(3000, () => {
    8.     console.log(`服务启动成功,地址是 http://127.0.0.1:3000`);
    9. })
    10. console.log(__dirname);
    11. app.get('/', (req, res) => {
    12.     res.sendFile(__dirname + '/groupChat.html')
    13. })
    14.  
    15. io.on("connection", (socket) => {
    16.     console.log('用户建立了链接');
    17.     // 接收客户端发来的数据
    18.     socket.on('chat message', function (msg) {
    19.         console.log('message:' + msg);
    20.         io.emit('receiveMessage', msg)
    21.     })
    22.     // 如果是断开socket请求，就会触发下面的代码
    23.     socket.on('disconnect', function () {
    24.         console.log('user disconnect')         
    25.     })
    26. });

    html部分：

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <title>Socket.IO chattitle>
    6.     <style>
    7.         * {
    8.             margin: 0;
    9.             padding: 0;
    10.             box-sizing: border-box;
    11.         }
    12.  
    13.         body {
    14.             font: 13px Helvetica, Arial;
    15.         }
    16.  
    17.         form {
    18.             background: #000;
    19.             padding: 3px;
    20.             position: fixed;
    21.             bottom: 0;
    22.             width: 100%;
    23.         }
    24.  
    25.         form input {
    26.             border: 0;
    27.             padding: 10px;
    28.             width: 80%;
    29.             margin-right: .5%;
    30.         }
    31.  
    32.         form button {
    33.             width: 19%;
    34.             background: rgb(130, 224, 255);
    35.             border: none;
    36.             padding: 10px;
    37.         }
    38.  
    39.         #messages {
    40.             list-style-type: none;
    41.             margin: 0;
    42.             padding: 0;
    43.         }
    44.  
    45.         #messages li {
    46.             padding: 5px 10px;
    47.         }
    48.     style>
    49. head>
    50.  
    51. <body>
    52.     <ul id="messages">
    53.     ul>
    54.     <form action="">
    55.         <input id="m" autocomplete="off" /><button>Sendbutton>
    56.     form>
    57. body>
    59.  
    60. <script src="/socket.io/socket.io.js">script>
    61. <script>
    62.     // 这样就加载了 socket.io-client。 socket.io-client 暴露了一个 io 全局变量，然后连接服务器。
    63.     //请注意我们在调用 io() 时没有指定任何 URL，因为它默认将尝试连接到提供当前页面的主机。
    64.     var username = prompt('请输入用户名')
    65.     var socket = io('http://127.0.0.1:3000');
    66.     var form = document.querySelector('form');
    67.     var val = document.querySelector('#m');
    68.     var messages = document.querySelector('#messages')
    69.     // var messages=document.querySelector('#messages')
    70.     form.onsubmit = function () {
    71.         var obj = {
    72.             username: username,
    73.             mes: val.value
    74.         }
    75.         socket.emit('chat message', JSON.stringify(obj));
    76.         // messages.innerHTML += `
    77.         //     
    78. ${val.value}
  • // `;
  • val.value = '';
  • // console.log(obj);
  • // console.log(messages);
  • return false;//阻止表单默认行为
  • }
  • //接收后端发来的消息
  • socket.on('receiveMessage', function (data) {
  • // console.log(data);
  • var obj = JSON.parse(data);
  • if (obj.username == username)
  • //不渲染自己发送的消息
  • return;
  • //渲染别人发送的消息
  • messages.innerHTML += `
  • ${obj.username}:${obj.mes}
  • `;
  • })
  • script>
  • html>

    • socket.io + html实现聊天（私聊）

    js部分：

    1. const app = require('express')(); // 获取express模块实例
    2. const http = require('http').Server(app); // 将express模块实例作为回调构建http模块实例
    3. const io = require('socket.io')(http, {
    4.     cors: true
    5. }); // 将http模块实例作为回调构建socket.io模块实例
    6.  
    7. // 使用http模块开启后端服务（原生node+express的结合）
    8. http.listen(3000, function () {
    9.     console.log('listening on http://127.0.0.1:3000')
    10. })
    11. // 设置路由，构建后端接口
    12. app.get('/', function (req, res) {
    13.     res.sendFile(__dirname + '/privateChat.html'); // 将根目录下的index.html发送到前端
    14. })
    15. var users = {}; // 保存所有用户的键值对集合
    16. io.on('connection', function (socket) {
    17.     socket.on('con', function (msg) {
    18.         var obj = JSON.parse(msg) // 获取连接的用户信息
    19.         users[obj.username] = socket.id; // 将当前用户名和对应的链接id进行保存
    20.         console.log('有新的链接,最新用户集合为：', users)
    21.     })
    22.     // 接收客户端发来的数据
    23.     socket.on('chat message', function (msg) {
    24.         var obj = JSON.parse(msg) // 获取连接的用户信息
    25.         console.log('obj:', obj)
    26.         if (users[obj.toWho] == undefined) {
    27.             let respmes = {
    28.                 usernamez: '系统信息',
    29.                 mes: '抱歉【' + obj.toWho + '】还未上线'
    30.             }
    31.             io.to(socket.id).emit('receiveMessage', JSON.stringify(respmes)); // 将消息发给当前用户
    32.         } else { // 说明目标用户存在
    33.             let respmes = {
    34.                 usernamez: obj.username,
    35.                 mes: obj.mes
    36.             }
    37.             io.to(users[obj.toWho]).emit('receiveMessage', JSON.stringify(respmes)); // 通过id将信息转发给指定的对象
    38.         }
    39.     })
    40.     // 如果是断开socket请求，就会触发下面的代码
    41.     socket.on('disconnect', function () {
    42.         console.log('user disconnected')
    43.     })
    44. })
    45.

    html部分：

    1. <html>
    2.  
    3. <head>
    4.     <title>Socket.IO chattitle>
    5.     <style>
    6.         * {
    7.             margin: 0;
    8.             padding: 0;
    9.             box-sizing: border-box;
    10.         }
    11.  
    12.         body {
    13.             font: 13px Helvetica, Arial;
    14.         }
    15.  
    16.         form {
    17.             background: #000;
    18.             padding: 3px;
    19.             position: fixed;
    20.             bottom: 0;
    21.             width: 100%;
    22.         }
    23.  
    24.         form input {
    25.             border: 0;
    26.             padding: 10px;
    27.             width: 80%;
    28.             margin-right: .5%;
    29.         }
    30.  
    31.         form button {
    32.             width: 19%;
    33.             background: rgb(130, 224, 255);
    34.             border: none;
    35.             padding: 10px;
    36.         }
    37.  
    38.         #messages {
    39.             list-style-type: none;
    40.             margin: 0;
    41.             padding: 0;
    42.         }
    43.  
    44.         #messages li {
    45.             padding: 5px 10px;
    46.         }
    47.     style>
    48. head>
    49.  
    50. <body>
    51.     <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"
    52.         integrity="sha384-/KNQL8Nu5gCHLqwqfQjA689Hhoqgi2S84SNUxC3roTe4EhJ9AfLkp8QiQcU8AMzI"
    53.         crossorigin="anonymous">script>
    54.     
    55.     <script>
    56.         // 这样就加载了 socket.io-client。 socket.io-client 暴露了一个 io 全局变量，然后连接服务器。
    57.         //请注意我们在调用 io() 时没有指定任何 URL，因为它默认将尝试连接到提供当前页面的主机。
    58.         window.onload = function () {
    59.             var username = prompt("请输入你的用户名：", "");
    60.             var who = prompt("你要和谁聊天？：", "");
    61.             document.body.innerHTML = `
      当前用户：${username}, 和${who}聊天中...
      `       + document.body.innerHTML;
    62.             var socket = io("http://localhost:3000/");
    63.             var form = document.querySelector("form");
    64.             var val = document.querySelector("#m");
    65.             //先和服务端建立连接
    66.             let conobj = {
    67.                 username: username,
    68.                 toWho: who,
    69.             }
    70.             socket.emit('con', JSON.stringify(conobj));
    71.             //表单提交事件
    72.             form.onsubmit = function () {
    73.                 let obj = {
    74.                     username: username,
    75.                     toWho: who,
    76.                     mes: val.value
    77.                 }
    78.                 socket.emit('chat message', JSON.stringify(obj));
    79.                 // messages.innerHTML += `
    80.                 // 
    81. ${val.value}
    82. `;
  • val.value = "";
  • return false;
  • }
  • //接收后端发来的消息
  • socket.on("receiveMessage", function (data) {
  • var obj = JSON.parse(data);
  • console.log(obj)
  • if (obj.username == username) return; //不接受自己发的消息
  • messages.innerHTML += `
  • ${obj.usernamez}:${obj.mes}
  • `;
  • })
  • }
  • script>
  • <ul id="messages">ul>
  • <form action="">
  • <input id="m" autocomplete="off" /><button>Sendbutton>
  • form>
  • body>
  • html>

  • 相关阅读:
    uniapp 微信小程序 vue3.0+TS手写自定义封装步骤条（setup）
    [附源码]计算机毕业设计springboot课程在线测评系统
    Epuck2机器人固件更新及IP查询
    Java日志系列——日志门面，阿里日志规约，SLF4J
    Vue.js 路由时用于提高应用程序性能
    Flutter的Event Loop
    K近邻算法实例
    树形DP（）
    Linux Centos7安装后，无法查询到IP地址，无ens0，只有lo和ens33的解决方案
    戴尔G3-3579改固态散热
  • 原文地址：https://blog.csdn.net/weixin_60968779/article/details/127327875