ExpressJS Socket.io -- 基础篇

本文档介绍了如何使用Vue.js、Socket.io和ExpressJS搭建WebSocket通信环境。首先,讲述了在Server端安装socket.io包并编写服务端代码,包括可能出现的错误排查。接着,介绍了客户端的安装步骤及在main.js中配置WebSocket连接。最后,展示了如何实现在服务端广播消息到所有客户端的代码片段,并鼓励读者提出问题进行讨论。
摘要由CSDN通过智能技术生成

socket.io 开发文档

技术栈

Vue + Socket.io + ExpressJS

Server 端

安装 socket.io 包

 npm install socket.io -S

服务端代码

var express = require('express');
var app = express();
var server = app.listen(8810);
var io = require('socket.io')(server, {
   
    cors: {
   
        origin: '*'
    }
})

io.on('connect', socket => {
   
    console.log('connect');
})

module.exports = app;

可能会出现的错误

在这里插入图片描述
这种情况下,一般服务端代码写的格式不对,检查一下你的代码是不是和我一样就可以了。

客户端

安装

npm install vue-socket.io -S
npm install socket.io-client -S

main.js代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
非常感谢您的提问。以下是一开源代码及组件使用情况说明的具体示例: 本项目使用了以下的开源代码及其组件: 1. React.js - 用于构建可重用组件 (https://reactjs.org/) 2. Redux - 用于状态管理 (https://redux.js.org/) 3. Express.js - 用于构建后端服务 (https://expressjs.com/) 4. MongoDB - 用于数据存储 (https://www.mongodb.com/) 5. Socket.io - 用于实现实时通信 (https://socket.io/) 该项目的整体目标是打造一个在线的聊天室应用,其中用户可以实时发送文字和图片信息,并且可以查看他人的在线状态和历史聊天记录。下面是该应用的具体实现: 前端使用了 React.js 框架,其中主要分为三个组件:登录组件、聊天组件和用户信息组件。用户通过登录组件输入用户名和密码进行身份验证,成功后进入聊天组件,可以看到一个聊天框和输入框。通过 Socket.io 技术,用户发送信息后可以实时把该信息推送给其他在线用户。 后端使用了 Express.js 构建,主要分为两个模块:认证模块和消息处理模块。认证模块主要处理用户登录逻辑,包括用户名和密码认证、用户状态维护等。消息处理模块主要处理用户发送的信息,包括存储在 MongoDB 中、推送给在线用户等。 总体而言,该项目充分利用了开源代码和组件,通过复用已有的软件模块实现了一个简单而高效的在线聊天应用。 希望以上这些信息对您有所帮助。如果您有其他问题或需要更多的帮助,请随时跟我说。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值