使用js建立客户端与服务端的websocket连接实现通信

最新推荐文章于 2024-10-09 13:41:29 发布

web前端小哥

最新推荐文章于 2024-10-09 13:41:29 发布

阅读量5.1k

点赞数 1

文章标签： websocket javascript 网络协议

本文链接：https://blog.csdn.net/playxmz/article/details/123002830

版权

本文介绍了如何使用socket.io库在JavaScript客户端和服务器之间建立WebSocket连接，实现双向实时通信。详细讲解了建立连接的步骤以及客户端和服务器端的代码实现，包括发送和接收消息的示例。

摘要由CSDN通过智能技术生成

socket.io

基于服务端之间提供实时双向基于时间通信的网络通信框架 websocket提供了相关的API

1，建立wesocket连接

第一步关于node.js写法

// index.js
const http = require('http').createServer()
// 加载socket.io模块 获取socketio对象
// 用于处理客户短的websocket 连接他需要http服务器
const socketio=require('socket.io')(http)
// 通过socketio 监听客户端发的建立websocket 连接请求
// 一旦收到 立即执行回调方法 并且传入该客户端通信 
// 所需要的socket对象
socketio.on('connection',function (socket) { 
        console.log('有客户端进来了' + socket.id);
 })
//  启动服务器 监听3000端口
http.listen(3000,()=>{
    console.log('服务器已经启动');
})

2. 实现websocket通信

客户端js代码发送及接收

  <script>
        let socket; //全局变量  
        // 点击btn  建立websocket连接
        btn.addEventListener('click',function () { 
            socket = io('http://localhost:4200/')