简单实现socket.io后端主动给前端发请求

下面的使用到的技术栈是vue+node(express)

后端

npm install socketio express express-static
// or
yarn add socketio express express-static
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.Server(app);
const soc = socketIo(server);
server.listen(9000);

const socOne = soc.of('/one');
const socTow = soc.of('/tow');
//监听connection(用户连接)事件,socket为用户连接的实例
socOne.on('connection', (socket) => {
  console.log("连接");
  socket.on('disconnect', () => {
    //监听用户断开事件
    console.log("断开连接");
  });
  //监听msg事件
  socket.on('msg', (data) => {
  	//打印用户端发送的信息
    console.log(data);
    //1秒后向socket用户发送信息
     setTimeout(() => {
       socket.emit('msg', `你好浏览器`);
     }, 1000);
  })
})
// 监听向tow发送的信息
socTow.on('connection', (socket) => {
  console.log("连接");
  socket.on('disconnect', () => {
    //监听用户断开事件
    console.log("断开连接");
  });
  //监听msg事件
  socket.on('msg', (data) => {
  	//打印用户端发送的信息
    console.log(data);
    //1秒后向socket用户发送信息
     setTimeout(() => {
       socket.emit('msg', `你好浏览器`);
     }, 1000);
  })
})

如果需要主动向所有用户发送信息,socket也给我们提供了方法

soc.on('connection', function (socket) {
  //这条信息会发送给除了当前socket的其他用户
  socket.broadcast.emit('有用户连接');
});

上面这个方法是发送给连接同一个soc的用户的,如果在socOne里掉是不会发送给socTow的

前端

npm install socket.io
// or
yarn add socket.io
<template>
  <div class="home">
    <button @click="sendA">发送消息abutton>
    <button @click="sendB">发送消息bbutton>
  div>
template>

<script>
import io from "socket.io-client"
export default {
  data() {
    return {
      socA: null,
      socB: null
    }
  },
  methods: {
  // 主动向服务器one发送信息
    sendA() {
      this.socA.emit('msg', '你好服务器');
    },
  // 主动向服务器tow发送信息
    sendB() {
      this.socB.emit('msg', '你好服务器');
    },
    init() {
      this.socA = io('http://localhost:9000/one', {
        transports: ['websocket']
      });
      this.socB = io('http://localhost:9000/tow', {
        transports: ['websocket']
      });
      // 监听one返回的信息
      this.socA.on('msg', (data) => {
        console.log(data);
      });
      // 监听tow返回的信息
      this.socB.on('msg', (data) => {
        console.log(data);
      });
    }
  },
  created() {
    this.init();
  }
}
script>

这里说个聊天实现思路

时隔半个小时,来更新一下

1.想要实现聊天效果首先需要将刚刚所登录的用户全部储存起来
	这里可以用缓存或者说是变量来储存,简单易用,就是服务器不能重启,重启数据就都没了。
	用户登录之后将用户的信息储存起来,将用户对用的socket实例也要储存起来(connection回调里的实例)
	用户退出登录,当用户与服务器断开连接之后将储存的该用户和cocket实例也删除掉(防止没用的信息太多,清理内存)
2.群发消息
	上面也说到了一个方法,socket.broadcast.emit('msg','有用户连接'),这个方法会发送给除了当前socket实例以外所有的socket(如果填写了如上的msg,需要客户端也要有监听msg的方法)
3.点对点发消息
	之前储存了用户的信息和用户的实例,之前忘记说一点,就是储存的用户或者socket实例必须有唯一的区分,比如用户登录账户(不会有人会让用户账户重复的吧)。
	用户发送过来的信息带上自己的信息、对方的信息以及发送的内容。服务器凭借对方的信息找到对应的socket实例,使用该实例向对法推送消息,并带上发送消息的用户信息和内容。

都写到这了,在补充一个思路
4.离线消息(也就是对方不在线)
	接收到用户需要推送的信息,去查询接收者的信息,发现当前连接的里面没有(不在线),将这条消息储存。
	接下来修改用户登录,登录的时候不再是简单的保存了,再加一步,查询当前离线池里(刚刚给起的名字,就是储存的未推送消息记录)有没有属于自己的信息,有的话就推送,没有就是正常登录。

再唠叨一句,每个socket实例都有一个id,这个id是唯一的,但是不能拿它去识别用户,因为这玩意是根据链接的时候生成的,可能会变,作为区分需要自己再绑定用户信息

你可能感兴趣的:(前端学习经历,后端学习,后端,node.js,vue.js,前端,socket)