基于socket.io的简易聊天室

最新推荐文章于 2023-07-17 17:28:39 发布

snakeZix

最新推荐文章于 2023-07-17 17:28:39 发布

阅读量294

点赞数 1

分类专栏： # socket.io 文章标签： socket nodejs javascript

本文链接：https://blog.csdn.net/wucan111/article/details/107960182

版权

本文介绍如何使用socket.io创建一个简单的在线聊天室。从后端的服务器设置到前端的连接和消息传递，详细阐述了聊天室的工作流程。通过实例代码展示socket.io的连接、监听和发送消息，以及心跳机制确保连接稳定性。此外，还讨论了options的path配置。

摘要由CSDN通过智能技术生成

聊天室这篇博客不讲解聊天系统（带数据库），只是简单的讲一下在线实时聊天室，但是它是一个聊天系统的基础。相信你很快就学会Socket.Io

如果你希望更快的了解，直接git下面的代码链接，配合看
chat-room

流程

后端搭建服务器，安装socket.io服务依赖，通过代码挂载服务。
前端链接服务
前端实现监听和发送
服务端实现监听和发送

开始安装

后端基于nodejs讲解，而且为了方便直接用express框架，只是为了更快，用原生的也可。
接下来，在编写代码时，我会加上注释解释作用，希望你先看完 基本工作机制

新建一个文件chat-room，进入cmd命令行，

npm init -y
npm install express -S //局部安装express框架
//

在根目录下（chat-room）新建一个index.js作为入口文件

var express = require('express')();
var server = require('http').createServer(express);

express.get('/', (req, res) => {
   
  res.send('<h1>Hello world</h1>');
});

server.listen(3000, () => {
   
  console.log('listening on *:3000');
});

cmd运行

node index.js

至此，搭建了一个nodejs服务。挂载在3000端口访问，说明搭建服务成功

开始正式搭建环境

npm install socket.io -S // 安装socket.io模块

在根目录下新建一个index.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-chi

最低0.47元/天解锁文章