• Vue + Nodejs + socket.io 实现聊天


    Vue  代码

    1. // 安装 socket.io-client
    2. npm i socket.io-client
    3. import io from 'socket.io-client';
    4. mounted () {
    5. // * location.origin 表示你的 socket 服务地址
    6. // * /XXXX/socket.io 表示 你的 socket 在服务器配置的 访问地址
    7. let socket = io(location.origin, {
    8. path: "/XXXX/socket.io"
    9. });
    10. this.soccket = socket;
    11. // 将 socket 挂载到全局
    12. this.$store.commit('setSocketMain', socket);
    13. // * 監聽 socket 鏈接成功
    14. socket.on('connect', () => {
    15. // userInfo 表示用户信息
    16. socket.emit('user:login', userInfo); // 发送一个自定义事件,如'user:login',以及用户信息
    17. });
    18. // * 监听收到消息
    19. socket.on('message', message => {
    20. console.log('接收到信息', message);
    21. let text = `${message.name}:${message.text}`;
    22. this.$notify({
    23. title: '消息提醒',
    24. dangerouslyUseHTMLString: true,
    25. message:text,
    26. type: "success",
    27. duration: 2000
    28. });
    29. // * 将消息显示在页面上
    30. this.pushMessage(message.text};
    31. })
    32. },
    33. methed:{
    34. // * 发送消息, 包含了 text,uid,toUid,fId,name
    35. pushMessage(arg){
    36. this.soccket.emit('message',arg)
    37. }
    38. }

    NodeJS 代码

    1. // * 先安装 socket.io
    2. npm i socket.io
    3. // * 修改启动文件, 比如我的是 www.js
    4. const express = require('express');
    5. const http = require('http'); // 引入 http 模块
    6. const socketIo = require('socket.io'); // 引入 socket.io 模块
    7. // 实例化一个 express的对象
    8. const app = express();
    9. // 创建一个 HTTP 服务器实例
    10. const server = http.createServer(app);
    11. // 实例化 Socket.IO 并将其附加到 HTTP 服务器实例
    12. const io = socketIo(server, {
    13. path: '/XXXX/socket.io', // 假设你的命名空间是 '/XXXX' , 这里也对应了 vue 那里的值
    14. });
    15. //监听3000端口
    16. server.listen(3000, function () {
    17. var host = server.address().address;
    18. var port = server.address().port;
    19. if (host == '::') {
    20. host = 'localhost:';
    21. }
    22. console.log(`启动成功访问地址 http://${host}${port}`);
    23. });
    24. //暴露
    25. module.exports = { app, io };
    26. // * 其中, app 会 被 app.js 所引用, 作为启动
    27. // * io 可以在需要socket 的地方引用, 如 message.js
    28. const { io } = require('../../bin/www');
    29. // * socket 方法
    30. const _socket = {
    31. // * socket - user 對象
    32. sockets: [],
    33. // * 用戶登錄
    34. login(socket, user) {
    35. this.sockets.push({
    36. uId: user.id,
    37. socketId: socket.id,
    38. socket: socket,
    39. });
    40. },
    41. // * 登出
    42. logout(socketId) {
    43. console.log('用戶離線');
    44. let u = this.sockets.filter((item) => item.socketId == socketId);
    45. if (u.length > 0) this.sockets.splice(this.sockets.indexOf(u[0]), 1);
    46. },
    47. // * 獲取當前用戶 的 socket
    48. getSocket(e) {
    49. console.log('獲取當前用戶:', e);
    50. let u = this.sockets.filter((item) => item.socketId == e || item.uId == e);
    51. if (u.length > 0) return u[0];
    52. return {};
    53. },
    54. // * 發送消息
    55. pushMessage(e, message) {
    56. let user = this.getSocket(e);
    57. let socket = user.socket;
    58. if (socket) {
    59. socket.emit('message', message);
    60. } else {
    61. console.log(`用戶離線或用戶不存在`);
    62. }
    63. },
    64. };
    65. // * 设置 Socket.IO 事件监听器
    66. io.on('connection', (socket) => {
    67. let socketId = socket.id;
    68. // * 監聽用戶登錄
    69. socket.on('user:login', (user) => {
    70. console.log('有用戶上線了', user);
    71. _socket.login(socket, user);
    72. });
    73. // * 登出
    74. socket.on('user:logout', () => {
    75. socket.leave(socketId);
    76. _socket.logout(socketId);
    77. });
    78. // * 当客户端断开连接时
    79. socket.on('disconnect', () => {
    80. socket.leave(socketId);
    81. _socket.logout(socketId);
    82. });
    83. // * 监听接收消息
    84. socket.on('message',(arg)=>{
    85. const { fId,uid,name,toUid,text } = arg;
    86. // * 发送给指定人
    87. _socket.pushMessage(toUid, {
    88. fId: fId,
    89. uid: uid,
    90. toUid: toUid,
    91. name: decodeURI(name),
    92. text: text,
    93. });
    94. })
    95. });

  • 相关阅读:
    IAB视频广告标准《数字视频和有线电视广告格式指南》之 简介、目录及视频配套广告 - 我为什么要翻译介绍美国人工智能科技公司IAB系列(2)
    Web3:开源文化下的技术创新
    如何在 PyGame 中初始化所有导入的模块
    IDEA启动项目显示端口占用问题
    10.17七段数码管单个&多个(部分)
    Web学习(十一) Vue
    php社区果蔬网站毕业设计源码211548
    国务院:电子印章跨地区跨部门互信互认,契约锁助力企业办事提效
    基于HTML+CSS+JS实现七夕情人节表白代码【含代码】
    VueRouter的使用
  • 原文地址:https://blog.csdn.net/qq_37802298/article/details/139340382