使用 Socket.io 进行群聊的方法-JavaScript中文网-JavaScript教程资源分享门户

在今天的网络时代，即时通讯已经成为社交交互中不可或缺的一部分，很多互联网公司也都有自己的即时通讯产品，而 Socket.io 就是一款非常优秀的即时通讯工具。在本文中，我们将讲述如何使用 Socket.io 进行群聊。

为什么选择 Socket.io？

相比于其他即时通讯工具，Socket.io 具有以下几点优势：

跨浏览器
跨平台
高实时性
双向通信
可靠性强
学习成本低

鉴于上述优点，Socket.io 自然成为了很多开发者进行即时通讯开发的首选工具。

安装 Socket.io

在开始编写 Socket.io 群聊功能之前，我们需要先安装并初始化 Socket.io。在命令行中执行以下命令：

npm install socket.io --save

npm install express --save

接下来，我们需要创建项目并在服务器通过 express 来进行监听，代码如下：

const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)

server.listen(3000, () => {
  console.log('server running at http://localhost:3000')
})

群聊功能的实现

接下来，我们就可以进行 Socket.io 群聊功能的实现了。

加入聊天室

第一步，当用户加入聊天室时，我们需要创建一个 Socket 连接。代码如下：

// www.javascriptcn.com code example
io.on('connection', socket => {
  console.log('Welcome to the chat room')

  socket.on('join', name => {
    socket.broadcast.emit('sys', name + ' has joined the chat')
    socket.nickname = name
  })

  socket.on('disconnect', () => {
    socket.broadcast.emit('sys', socket.nickname + ' has left the chat')
  })
})

在上述代码中，我们使用 io.on() 方法来监听所有的连接事件，然后通过 socket.nickname 保存用户的昵称。

当用户通过 socket.emit() 方法向服务器发送 join 事件时，就会触发 socket.on('join') 事件，然后向所有用户发送 sys 事件来告知其他用户有新用户加入聊天室。

聊天消息

第二步，当用户在聊天室中发送消息时，我们也需要通过 Socket 连接来实现聊天消息的发送和接收。代码如下：

io.on('connection', socket => {
  socket.on('message', msg => {
    socket.broadcast.emit('message', socket.nickname, msg)
  })
})

在上述代码中，我们通过 socket.broadcast.emit() 向服务器发送 message 事件来将消息发送给其他所有用户。

客户端代码

接下来，我们需要编写前端代码来实现 Socket.io 群聊功能。代码如下：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Socket.io 群聊</title>
</head>
<body>
  <div id="chat-wrap">
    <div id="chat-room">
      <ul id="chat-list"></ul>
      <div class="input-wrap">
        <input id="nickname-input" placeholder="请输入昵称">
        <input id="message-input" placeholder="请输入消息">
        <button id="join-btn">加入聊天室</button>
      </div>
    </div>
  </div>

  <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
  <script>
    var socket = io()
    var nicknameInput = document.getElementById('nickname-input')
    var messageInput = document.getElementById('message-input')
    var joinBtn = document.getElementById('join-btn')

    joinBtn.onclick = function () {
      var nickname = nicknameInput.value
      socket.emit('join', nickname)
    }

    socket.on('sys', function (msg) {
      var li = document.createElement('li')
      li.innerText = msg
      document.getElementById('chat-list').appendChild(li)
    })

    socket.on('message', function (nickname, msg) {
      var li = document.createElement('li')
      li.innerText = nickname + ': ' + msg
      document.getElementById('chat-list').appendChild(li)
    })

    messageInput.onkeydown = function (e) {
      if (e.keyCode === 13) {
        var nickname = nicknameInput.value
        var msg = messageInput.value
        socket.emit('message', msg)
        messageInput.value = ''
      }
    }
  </script>
</body>
</html>

在上述代码中，我们使用了 Socket.io 提供的 socket.emit() 方法和 socket.on() 方法来实现了 Socket 连接的建立和消息的发送和接收。同时，我们也将实现了聊天室显示的 HTML 代码写好。

结束语

到此，我们已经成功地实现了使用 Socket.io 进行群聊的功能。在实际开发中，我们只需要按照上述步骤编写代码，并将其部署到服务器上即可实现即时通讯功能。对新手来说，这也是一个很好的学习 Socket.io 的入门实践。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d62347a941bf7134bc93a2

使用 Socket.io 进行群聊的方法