socket.io怎么即时通信前端配合Node

发布时间:2021-04-23 09:53:37 作者:小新
来源:亿速云 阅读:188

小编给大家分享一下socket.io怎么即时通信前端配合Node,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

首先我们需要
新建文件夹
并快速生成一个package.json文件

npm init -y  //生成一个package.json
npm i express
npm i socket.io

新建一个serverRoom.js文件

const express = require('express')const app = express()let port =3000app.get('/',(req,res,next)=>{
    res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
    res.end('欢迎来到express')
    next()})const server = app.listen(port,()=>{console.log('成功启动express服务,端口号是'+port)})

在当前文件所在位置cmd

node serverRoom.js  
//或者使用  快速更新serverRoom.js的变化 同步到当前打开的服务器
//可以通过 npm i nodemon -g 下载到全局 使用很是方便 不亦乐乎
nodemon serverRoom.js

成功启动

socket.io怎么即时通信前端配合Node
在浏览器看一下

socket.io怎么即时通信前端配合Node
也是没有问题的。下面我们继续写serverRoom.js

const express = require('express')const app = express()let port =3000app.get('/',(req,res,next)=>{
    res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
    res.end('欢迎来到express')
    next()})const server = app.listen(port,()=>{console.log('成功启动express服务,端口号是'+port)})//引入socket.io传入服务器对象 让socket.io注入到web网页服务const io = require('socket.io')(server);io.on('connect',(websocketObj)=>{  //connect 固定的  
    //链接成功后立即触发webEvent事件
    websocketObj.emit('webEvent','恭喜链接websocket服务成功:目前链接的地址为:http://127.0.0.1:3000')})

前端html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 通过script的方式引入 soctke.io -->
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
    <!-- 为了操作dom方便我也引入了jq -->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <title>myWebsocket</title></head><body>
    <p class="myBox">
        <input class="inp" type="text"> <button onclick="sendFun()">点我</button>
    </p>
    <script>
        //页面打开自动链接 http://localhost:3000 后端服务
        let mySocket = io("http://localhost:3000") //直接写后端服务地址
        //一直在监听webEvent 这个事件
        mySocket.on('webEvent', (res) => {
            window.alert(res)
        })
        //获取input的输入内容//将来传给服务器
        function sendFun() {
            console.log($('.myBox>.inp').val())
        }
    </script></body></html>

当服务启动的时候,前端页面打开会自动链接我们后端服务,链接成功触发 webEvent 事件(名称可以自己定义,前后得统一),前端监听webEvent事件 获取服务器传送过来的内容并通过alert进行了显示。

好的,上面没问题下面就也很好理解:

下面要实现的功能是在input输入框中输入东西,传入服务器,服务器返回数组,前端显示在页面

//当然只是为了学习功能,就不要在乎例子了

看前端Html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 通过script的方式引入 soctke.io -->
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
    <!-- 为了操作dom方便我也引入了jq -->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <title>myWebsocket</title></head><body>
    <p class="myBox">
        <input class="inp" type="text"> <button onclick="sendFun()">点我</button>
        <p class="myBoxChild"></p>
    </p>
    <script>
        //页面打开自动链接 http://localhost:3000 后端服务
        let mySocket = io("http://localhost:3000") //直接写后端服务地址
        //一直在监听webEvent 这个事件
        mySocket.on('webEvent', (res) => {
            window.alert(res)
        })
        mySocket.on('sendFunEventCallBack', (res) => {
            console.log(res, 'sendFunEventCallBackRes')
            let data = JSON.parse(res)
            let str = ''
            for (let i = 0; i < data.length; i++) {
                str += `<p>${data[i]}</p>`
            }
            $('.myBoxChild')[0].innerHTML = str        })

        //获取input的输入内容//将来传给服务器
        function sendFun() {
            if ($('.myBox>.inp').val() != '') {
                mySocket.emit('sendFunEvent', $('.myBox>.inp').val())
                $('.myBox>.inp')[0].value = ''
            } else {
                alert('输入字符')
                return
            }
        }
    </script></body></html>

服务端

const express = require('express')const app = express()let port =3000app.get('/',(req,res,next)=>{
    res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
    res.end('欢迎来到express')
    next()})const server = app.listen(port,()=>{console.log('成功启动express服务,端口号是'+port)})//引入socket.io传入服务器对象 让socket.io注入到web网页服务const io = require('socket.io')(server);let arr=['恭喜链接websocket服务成功:目前链接的地址为:http://127.0.0.1:3000']io.on('connect',(websocketObj)=>{  //connect 固定的  
    //链接成功后立即触发webEvent事件
    websocketObj.emit('webEvent',JSON.stringify(arr));
    //监听前端触发的 sendFunEvent  事件 
    websocketObj.on('sendFunEvent',(webres)=>{
        arr.push(webres)
        //触发所以的 sendFunEventCallBack 事件  让前端监听
        io.sockets.emit("sendFunEventCallBack", JSON.stringify(arr));
    })})

在打开页面后,在input输入值,点击按钮触发sendFun函数,触发自定义事件 sendFunEvent并将input的value传送到服务器,服务器监听sendFunEvent事件,将数据push到数组中,又触发了sendFunEventCallBack事件,将数组JSON字符串化传到前端,前端监听sendFunEventCallBack事件,获取数组,JSON序列化,将数据循环到页面上,这是整个流程。

打开多个前端页面可以进行实时更新,可以进行聊天。

以上是“socket.io怎么即时通信前端配合Node”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. node怎么将geojson转shp返回给前端
  2. Nuxt配合Node在实际生产中怎么用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

socket.io node

上一篇:css如何让盒子并排显示

下一篇:基于BootStrap multiselect.js实现的下拉框联动效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》