如何解决如何在mern应用程序中使用socket io向特定用户发送消息
这是我的消息模式代码，我想通过套接字 io 向特定用户发送消息，并且我使用了 mern 堆栈，我是套接字新手我如何向特定用户一对一发送消息以及如何将其存储在此模式中
const MessageSchema = mongoose.Schema({
conversation:{
type: Schema.Types.ObjectId,ref: 'conversations',},to:{
type:Schema.Types.ObjectId,ref:'user',from:{
type:Schema.Types.ObjectId,body: {
type: String,required: true,createdAt: {
type: Date,default: Date.now()
}
})
这是我的服务器代码
io.on('connection',(socket) => { /* socket object may be used to send specific messages to the new connected client */
console.log('connection established',socket.id);
socket.on('send',(data)=>{
console.log("username is",data)
});
socket.on('disconnect',()=>{
io.emit('message','user left')
})
});
这是我的消息组件的客户端代码。这里我有当前用户朋友的用户列表如何使用套接字将消息发送给特定用户并将消息存储在消息模式中
import React,{ Component } from 'react';
import { Link,Redirect } from 'react-router-dom';
import UserService from "../services/userservice";
import {getUsersFriend} from "../services/messageservice";
import io from "socket.io-client";
const SOCKET_IO_URL = "http://localhost:4000/";
export default class Messages extends Component {
constructor(props){
super(props)
this.socket = io(SOCKET_IO_URL)
this.state = {
currentUser: UserService.getCurrentUser(),isLoading:false,userdetails:[],show:false,username:'',socketConnected:false,};
}
componentDidMount(){
this.fetchUser()
this.socket.on('connect',()=> {
this.setState({ socketConnected : true})
// console.log("connection")
})
}
async fetchUser(){
try{
const {currentUser} = this.state
console.log(currentUser)
const data = { userid : currentUser.user._id }
console.log(data)
let user = await getUsersFriend(data)
this.setState({ userdetails: user });
console.log(user)
}catch(err){
console.log(err)
}
}
showMessageSpace(elementusername){
this.setState({
show: true,username:elementusername
});
// console.log(elementusername)
}
SendMessage(username){
if(this.state.socketConnected){
console.log(username)
this.socket.emit('send',username);
}
}
render(){
const { currentUser,isLoading,userdetails} = this.state;
if (isLoading) {
return (<div><p>Loading...</p></div>);
}
if(!currentUser){
return(
<div>
<Redirect to='/login' />
</div>
)
}
else{
return(
<div>
<h1>Messages</h1>
<div>
<p>Users</p>
{' '}
<ul className="collection">
{userdetails.map((element) => {
return(
<div key={element._id}>
<li>{element.username}{' '}<input
type="button"
id={element._id}
value="Message"
onClick={this.showMessageSpace.bind(this,element.username)} ></input></li>
</div>
);
})
}
</ul>
{' '}
</div>
{' '}
<Link to="/dashboard">Dashboard</Link>
{' '}
<div>
{
this.state.show &&
(<div>
<h2>Username : {' '}{this.state.username}</h2>
{' '}
<div>
Body
</div>
{' '}
{' '}
<div>
{' '}
<input
type="text"
></input>
<button onClick={this.SendMessage.bind(this,this.state.username )}>Send</button>
</div>
{' '}
</div>)
}
</div>
</div>
)
}
}
}
我添加了消息和用户名，它是正确的控制台日志记录，我如何在反应中存储和获取这些消息
解决方法
在 socket.io 中，只有从客户端发送到服务器或从服务器发送到客户端的功能。
因此，如果您想从客户端 A 向客户端 B 发送消息，则必须通过服务器发送。首先，您为此用途设计一个特定的 socket.io 消息。我们称之为 "sendToUser"，其中数据是一个对象：
{
targetUser: "clientB",msg: "Hi"
}
因此，当客户端 A 想要发送给客户端 B 时，它会这样做以将消息和目标用户发送到您的服务器：
socket.emit("sendToUser",{targetUser: "clientB",msg: "Hi"}
服务器然后有 "sendToUser" 传入消息的侦听器。当服务器收到该消息时，它必须通过某种方式为“clientB”查找 socket.io 连接套接字对象。当它发现时，它会：
socketB.emit("sendToUser",{msg: "Hi",from: "clientA"}
当然，您的客户有 "sendToUser" 的侦听器，当它接收到该侦听器时，它会获取消息以及来自谁的消息，并可以针对您的应用程序采取相应的行动。
现在，这里缺少一些东西。首先，您必须在服务器上的套接字和用户名之间建立某种关联。用户名的确切来源是特定于应用程序的，但通常用户会登录，登录后，您的服务器会从他们的登录 cookie 和/或会话对象中知道哪个用户是哪个用户。然后，当同一用户建立 socket.io 连接时，您可以记录这是哪个用户。当他们连接时，您可能还想将他们的连接存储在某种查找对象中，以便您可以通过用户名进行高效的查找。
如果，当他们连接到您的服务器时，您还将他们的用户名记录为套接字对象的一个属性，这将在以后有用。
因此，一旦您通过用户名进行了这种高效的查找，您只需查找 targetUser 名称并获取他们的套接字，然后发送给他们即可。
而且，当您想知道“from”用户名是谁时，您只需读取 from 用户的套接字对象上的属性即可获取他们的用户名。
,你必须至少有 1 个服务器和 1 个客户端才能有工作示例。 在上面的代码中，我只能看到客户端代码。
所以首先创建与该套接字连接的服务器
Nodejs 代码是
const server = require('http').createServer();
const io = require('socket.io')(server);
io.on('connection',client => {
client.on('eventName',data => { /* … */ });
client.on('disconnect',() => { /* … */ });
});
server.listen(3000);
然后在 React 代码中你可以
socket.emit('eventName',data => {
console.log("connection",data)
})
并且服务器也可以在 eventName 事件上发出
在你的 componentDidMount 中，你可以设置 socket 连接时的状态
socket.on('connect',function(){
// set state here e.x. socketConnected:true
});
在你的按钮中点击
const sendMessage = () => {
if(this.state.socketConnected){
socket.emit(`eventName`,{message:"isTHIs"}})
}
};
定义套接字为
import io from 'socket.io-client';
this.socket = io(APP_SERVER_IP) // in constructor
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
