实现一个简单的 socket web 聊天 #13

Jsmond2016 · 2021-11-09T06:21:50Z

准备

安装：npm i express
创建 js 文件

// index.js
// 创建一个 聊天的 IO 
const app = require('express')()
const http = require('http').Server(app)

const io = require('socket.io')(http)


app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html')
})

io.on('connection', function (socket) {
  console.log('a user connection ....')
  socket.on('chat message', function (msg) {
    console.log('chat --- message' + msg)
    io.emit('chat message', msg)
  })
})

io.on('disconnect', function (req, res) {
  console.log('user disconnected')
})


http.listen(3000, function () {
  console.log('服务已启动，端口 3000------')
})

对应 html 文件：

<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO chat</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font: 13px Helvetica, Arial;
    }

    form {
      background: #000;
      padding: 3px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    form input {
      border: 0;
      padding: 10px;
      width: 90%;
      margin-right: 0.5%;
    }

    form button {
      width: 9%;
      background: rgb(130, 224, 255);
      border: none;
      padding: 10px;
    }

    #messages {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    #messages li {
      padding: 5px 10px;
    }

    #messages li:nth-child(odd) {
      background: #eee;
    }
  </style>
</head>

<body>
  <ul id="messages"></ul>
  <form action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js">
  </script>
  <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(function () {
      var socket = io();
      $("form").submit(function (e) {
        e.preventDefault(); // 避免表单提交⾏行行为
        socket.emit("chat message", $("#m").val());
        $("#m").val("");
        return false;
      });
      socket.on("chat message", function (msg) {
        $("#messages").append($("<li>").text(msg));
      });
    });
  </script>
</body>

</html>

启动测试：ndoe index.js 启动项目，打开两个浏览器 tab 进入同一个地址，即，输入消息的时候，2个窗口可以实现消息同步。

注意几个问题：

socket.on 客户端的事件监听响应
socket.emit 客户端派发监听事件
io.on 服务端的事件监听响应
io.emit 服务端派发监听事件

参考资料：

The text was updated successfully, but these errors were encountered:

Jsmond2016 added the Nodejs label Nov 9, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

实现一个简单的 socket web 聊天 #13

实现一个简单的 socket web 聊天 #13

Jsmond2016 commented Nov 9, 2021

实现一个简单的 socket web 聊天 #13

实现一个简单的 socket web 聊天 #13

Comments

Jsmond2016 commented Nov 9, 2021

准备

注意几个问题：