Web前端最全WebSocket初探（socket，2024年最新2024大厂前端面试经历

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

socket.on(‘chat’, function (data) {

// 然后广播给其他用户：某某某说了什么

broadcastExceptSelf(socket, {

event: ‘new_chat_content’,

data: {

user: socket.id,

content: data

}

})

});

// 监听socket连接断开

socket.on(‘disconnect’, (reason) => {

// 广播给其他用户：某某某退出了聊天室

broadcastExceptSelf(socket, {

event: ‘someone_exit’,

data: {

user: socket.id

}

})

});

});

// 给当前socket连接单独发消息

function sendToSingle(socket, param) {

socket.emit(‘singleMsg’, param);

}

// 对所有socket连接发消息

function broadcastAll(param) {

io.emit(‘broadcastAll’, param)

}

// 对除当前socket连接的其他所有socket连接发消息

function broadcastExceptSelf(socket, param) {

socket.broadcast.emit(‘broadcast’, param);

}

socket客户端

---

实现方式也比较简单

import io from ‘socket.io-client’;

// 创建和管理socket

createSocket() {

let self = this

this.socket = io(this.$store.state.config.API_ROOT);

this.socket.on(‘connect’, function(){

console.log(‘连上了’)

});

// 这里接收服务端发来的单独消息

this.socket.on(‘singleMsg’, function(msg){

console.log(msg)

switch (msg.event) {

// 如来自服务端的问候，虽然这里没写什么，但是可以据此做一些页面上的效果

case ‘greet_from_server’:

break

default:

break

}

})

// 目前还没用到，可拓展

this.socket.on(‘broadcastAll’, function(msg){

console.log(msg)

})

// 监听广播

this.socket.on(‘broadcast’, function(msg){

console.log(msg)

switch (msg.event) {

// 新用户加入聊天室

case ‘new_user_join’:

self.msgList.push({

time: new Date().toLocaleString(),

user: ‘系统通知’,

content: 用户 ${msg.data.user} 加入了聊天室......

})

break

// 用户退出聊天室

case ‘someone_exit’:

self.msgList.push({

time: new Date().toLocaleString(),

user: ‘系统通知’,

content: 用户 ${msg.data.user} 退出了聊天室......

})

break

// 接收某用户的聊天内容

case ‘new_chat_content’:

self.msgList.push({

time: new Date().toLocaleString(),

user: msg.data.user,

content: msg.data.content

})

break

default:

break

}

})

this.socket.on(‘disconnect’, function(){

console.log(‘连接断开了’)

});

},

// 监听输入框回车事件

onInpuKeyDown(e) {

console.log(e)

if (e.keyCode == 13) {

// 将输入的聊天内容推送给服务端

this.socket.emit(‘chat’, e.target.value)

this.msgList.push({

time: new Date().toLocaleString(),

user: ‘我说’,

content: e.target.value

})

this.newMsg = ‘’

}

}

我们用打开多个窗口的方式模拟多个用户的加入，我这里开了三个窗口，最后的效果大概是这样的。

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-iLj77Ssg-1715872692648)]

[外链图片转存中…(img-38TB1y9s-1715872692649)]