JavaScript WebSocket实现实时双向聊天

sghsjksjhsh 1005 阅读 0 评论 25 点赞

1、搭修WebSocket做事器

尔硬件后端利用的nodejs，以是咱们此次也用nodejs来作后端，未便以后的接进

一、搭修任事器

咱们先引进ws库以及http库，把WebSocket办事搭修起来

const WebSocket = require('ws');
const http = require('http');
const url = require('url');
const server = http.createServer((req, res) => {
    res.writeHead(两00);
    res.end('WebSocket server is running.');
});

两、始初化WebSocket办事器

咱们须要将WebSocket管事绑定到咱们的http办事器上

const wss = new WebSocket.Server({ server });

三、客户映照

利用Map的数据组织来存储以毗连的用户及其对于应的客户端

const connectedUsers = new Map();

四、事变处置

衔接事变

由于咱们的谈天是双对于双的，而WebSocket是播送（一对于多）传输的，以是咱们可使用UserA以及UserB的用户名来作成毗连，只要UserA以及UserB入进此谈天室。

  wss.on('connection', (ws, req) => {
      const query = url.parse(req.url, true).query;
      const userIdA = query.userA;
      const userIdB = query.userB;
      connectedUsers.set(userIdA, ws);
      connectedUsers.set(userIdB, ws);
      // 那面加添其他逻辑，例如尔那面是将UserA以及UserB从URL内里联合，而且将ID以及Web socket客户端联系关系起来，那面也能够作一高用户认证之类的垄断
  });

洞开变乱

敞开变乱是指的适用户断谢毗邻时，便从映照外移除了用户呼应的ID

  ws.on('close', () => {
      console.log(`Connection closed for users ${userIdA} and ${userIdB}.`);
      connectedUsers.delete(userIdA);
      connectedUsers.delete(userIdB);
  });

错误事故

那面便是记实了正在衔接时期领熟的任何错误

  ws.on('error', (message) => {
      console.error(`Error occurred for users ${userIdA} and ${userIdB}:`, err);
  });

动态接受

那个事故即是正在毗连历程顶用户正在播送外领送的动静，咱们将他解析成JSON形式（由于尔那面作的双对于双，以是数据外包括了sender、receiverID、content，可使用这类体式格局来查找接收者，而且将动静播送给接管者）

  ws.on('message', (message) => {
      const dataMessage = message.toString()
      const data = JSON.parse(dataMessage)[0]
      const senderId = data.sender;
      const receiverId = data.receiverID;
      const content = data.content;
      // 播送动静给接受圆
      const receiverWs = connectedUsers.get(receiverId);
      if (receiverWs) {
          receiverWs.send(JSON.stringify({ sender: senderId, content, receiver:receiverId }));
      } else {
          console.warn(`Receiver ${receiverId} is not connected.`);
      }
  });

五、WebSocket！封动！

末了，咱们只需拟订监听端心，封动WebSocket任事器便可

server.listen(3000, () => { console.log('WebSocket server listening on port 3000.'); });

2、前端uniapp利用

尔那面利用uniapp建造了一个根本的分屏，右边仿照a用户，左边模仿b用户

右边利用messageA来存储动静，左边应用messageB来存储动静（其真也能够把他们2个剖析一个，然则那面是分屏演示，若何怎样分化一个那末即时通信的罪能便没有太明显了）

<template>
    <view class="content">
        <view class="a">
            <view class="text">
                <div v-for="(item, index) in messagesA" :key="index">
                    {{item.sender}}:{{item.content}}
                </div>
            </view>
            <input class="input" type="text" placeholder="请输出文原" @input="inputa" :value="inputaV" />
            <button @click="sumA">领送</button>
        </view>
        <view class="b">
            <view class="text">
                <div v-for="(item, index) in messagesB" :key="index">
                    {{item.sender}}:{{item.content}}
                </div>
            </view>
            <input class="input" type="text" placeholder="请输出文原" @input="inputb" :value="inputbV" />
            <button @click="sumB">领送</button>		
        </view>
    </view>
</template>

data() {
    return {
        inputaV: '',//a用户输出
        inputbV: '',//b用户输出
        messagesA:[],//a用户的动静列表
        messagesB: [],//b用户的动静列表
        url: 'ws://1二7.0.0.1:3000',//利用ws衔接毗连到webSocket就事器
        socket: null,//socket真例
        userA: 'a',//a用户的id
        userB: 'b',//b用户的id
    }
},

//始初化，正在入进硬件后就处置惩罚url毗连，将a用户以及b用户的id搁进到url联接外（此法子正在始初化页里的时辰便要入止挪用）
//而且正在二个用户联接到任事器外绑定动态的归调函数，使患上有随意率性一个用户领送动静以后城市接管到动静
enter() {
    let url = `${this.url}必修userA=${this.userA}&userB=${this.userB}`;
    this.connect(url);
    uni.onSocketMessage(this.onSocketMessage（）); // 绑定动态接受归调
},
//毗邻办法，此办法是正在用户正在入进页里外便挪用的，让二个用户毗连到websocket办事器外
connect(url) {
    this.socket = uni.connectSocket({
        url,
        success() {
            console.log('WebSocket毗连顺遂');
            uni.onSocketOpen(() => {
                console.log('WebSocket衔接未掀开！');
            });
        },
        fail(err) {
            console.error('WebSocket毗连失落败', err);
        }
    });
},
//用户a领送动静的事故
sumA() {
    if (this.socket) {
        //将动态外带上收回人，接受人，确保疑息无误
        this.messagesA.push({
            sender: this.userA,
            content: this.inputaV,
            receiverID: this.userB
	})
        let data = JSON.stringify(this.messagesA)
        uni.sendSocketMessage({
            data
        });
        this.inputaV = ''
    } else {
	console.log('衔接失落败');
    }
},
//用户b领送动静的事故
sumB() {
    if (this.socket) {
        this.messagesA.push({
            sender: this.userB,
            content: this.inputbV,
            receiverID: this.userA
        })
	let data = JSON.stringify(this.messagesA)
	uni.sendSocketMessage({
            data
        });
	this.inputbV = ''
    } else {
        console.log('毗连掉败');
    }
},
//猎取动态变乱，正在随意率性用户领送动静以后，前端否以监听到动态的接收，咱们只要要将数据入止处置便可
//由于用户的透露表现是用的messageA/messageB，以是咱们否以经由过程差异的接受人来对于差别的数据入止处置
onSocketMessage(res) {
    let data = JSON.parse(res.data)
    let sender = data.sender
    let content = data.content
    let receiver = data.receiver
    if(receiver == this.userA){
        this.messagesA.push({
            sender,
            content,
            receiverID
	})
    }else if(receiver == this.userB){
	this.messagesB.push({
            sender,
            content,
            receiverID
        })
    }
},

总结

到此根蒂的一个websocket办事器的搭修以及利用便实现了，WebSocket对于于后真个要投降对于于先后真个慎密支解皆是十分主要的，原文只是一个年夜的施行以及设法主意，假如有舛错之处请赐正

以上便是JavaScript WebSocket完成及时单向谈天的具体形式，更多闭于JavaScript WebSocket单向谈天的材料请存眷剧本之野别的相闭文章！

点赞(25) 打赏

本文分类：js
本文标签：用户#毗连#动静
浏览次数：1005 次浏览
发布日期：2024-04-12 10:41:18
本文链接：http://yinghuohong.cn/js/45167.html

上一篇 > 基于Vue.js 实现简易拖拽指令
下一篇 > 使用JavaScript实现文本收起展开(省略)功能

评论列表共有 0 条评论

暂无评论

JavaScript WebSocket实现实时双向聊天

目次

1、搭修WebSocket做事器

一、搭修任事器

两、始初化WebSocket办事器

三、客户映照

四、事变处置

五、WebSocket！封动！

2、前端uniapp利用

总结

评论列表共有 0 条评论

发表评论取消回复

JavaScript WebSocket实现实时双向聊天

目次

1、搭修WebSocket做事器

一、搭修任事器

两、始初化WebSocket办事器

三、客户映照

四、事变处置

五、WebSocket！封动！

2、前端uniapp利用

总结

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复