02----3小时用 websocket 实现聊天室之项目基本配置

最新推荐文章于 2023-12-25 17:34:31 发布

前端阳光

最新推荐文章于 2023-12-25 17:34:31 发布

阅读量205

点赞数

分类专栏：前端全栈文章标签： h5&amp;amp;websocket实现聊天室

本文链接：https://blog.csdn.net/weixin_43964148/article/details/99729817

版权

前端同时被 2 个专栏收录

95 篇文章 8 订阅

订阅专栏

全栈

19 篇文章 1 订阅

订阅专栏

本文介绍了如何在3小时内利用WebSocket和socket.io构建一个聊天室。首先，需要安装socket.io和express库。服务端通过app.js文件设置监听，客户端则通过inline-chat文件接收并显示服务端发送的消息，当接收到消息时，表明配置成功。

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

参考文档 socket.io

先引入 socket.io插件

npm install --save socket.io

因为是基于express的，所以还需要install express；

npm install express --save

服务端代码（app.js）

//创建了http服务器
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(3000);


app.get('/', function (req, res) {
    res.sendFile(__dirname + '/online-chat.html');
});

io.on('connection', function (socket) {
    socket.emit('send', { name: 'haha' });

});

客户端代码（inline-chat）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线聊天室</title>
</head>
<body>
   
</body>
<script src="/socket.io/socket.io.js"></script>  //必须引入
<script>
    var socket = io('http://localhost:3000');  //请求3000端口
        socket.on('send', function (data) {  
        console.log(data);  
    });
</script>
</html>

在这里插入图片描述
接收到了服务端发过来的消息，说明配置成功了。

前端阳光

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
02----3小时用 websocket 实现聊天室之项目基本配置

参考文档 socket.io先引入 socket.io插件npm install --save socket.io服务端代码（app.js）//创建了http服务器var app = require('http').createServer();var fs = require('fs');app.on('request',(req, res) =>{ fs...
复制链接

扫一扫